从头开发一个微信小程序(会不断补充完善,直至毕设做完)

Posted 肉丸不肉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从头开发一个微信小程序(会不断补充完善,直至毕设做完)相关的知识,希望对你有一定的参考价值。

“从头”指的是:已经建立好初始项目

零、初始框架结构

  1. 建立images目录放此小程序用到的所有图片
  2. 在pages下建立开发过程成用到的所有页面

一、建立底部导航栏

  1. 在app.json中
  2. 导航栏代码为:tabBar那块

我的小程序tabBar有四个为:首页、全部分类、购物车、我的
不移过多,3个或4个布局最顺眼

  1. "pagePath":此导航对应的页面,需要自己新创建,page的创建技巧见后面。
  2. "text":各个导航对应的文字
  3. "iconPath":未选中此导航对应的图标
  4. "selectedInconPath":选中此导航对应的图标
  1. iconPath和selectedInconPath这个两个属性是为了使用两个图标来模拟 选中导航变色的功能。所以下载图标时就一种图标下载两个颜色
  2. 点我进入下载矢量图标的网站
"tabBar": 
    "color": "#000000",
    "list": [
      
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home2.png",
        "selectedIconPath": "images/home_selected.png"
      ,
      
        "pagePath": "pages/all/all",
        "text": "全部分类",
        "iconPath": "images/social.png",
        "selectedIconPath": "images/social_selected.png"
      ,
      
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/cart.png",
        "selectedIconPath": "images/cart_selected.png"
      ,
      
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_selected.png"
      
    ]
  ,


二、建立各个page

  1. (推荐)快速建立一个新的page的技巧:直接在app.json文件中的"pages"属性下按格式写入想要的页面名字,系统会自动给创建每个page所有的四个文件(.js .json .wxml .wxss)
  2. (不推荐)否则,需要在pages目录下手动创建 新page所有的这四个文件。

三、待补充

以上是关于从头开发一个微信小程序(会不断补充完善,直至毕设做完)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 Notes | 开发常用事例

开题报告微信小程序购物选题背景怎么写

微信小程序开发小白零基础入门微信小程序入门建议收藏

小程序是啥 怎么开发 微信小程序开发优势

微信小程序的未来!?

怎么把微信支付商户号接入小程序里面