微信小程序商城（前端篇）

本文档是基于本人第一次接触小程序的全过程学习步骤

步骤1：

可参见小程序官方简易教程：https://developers.weixin.qq.com/miniprogram/dev/

以下描述是基于上述教程的基础上实际上手内容

步骤2：

1、申请账号，根据指引申请账号之后获得开发者id

2、安装开发工具，根据教程指引下载安装

步骤3：新建项目：打开微信web开发者工具——选择小程序项目——选择一个空目录（也可直接选择一个项目打开，此处基于第一次新建项目）——AppID填写第一天获取到的开发者id——填写项目名称——若项目目录是空文件夹，则会显示下图第四点，一般选择普通快速启动模板

---

---

步骤4：代码构成，新建完一个快速模板之后，会生成如下文件：

1、app.json :

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，app.json 的 pages 字段可以知道所有页面路径，于是微信客户端就把页面的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个页面。

关于app.json描述：

//当前小程序的全局配置，包含所有页面路径、界面表现、网络超时时间、底部tab等
{
  //pages ：用于描述当前小程序所有页面路径，用于指定小程序有哪些页面组成，每一项都对应一个页面的 路径+文件名 文件名不需要写后缀  框架会自动去寻找 对应位置的 4个文件 .json .js  .wxml  .wxss 进行处理
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // window：全局默认窗口的表现，定义所有页面的顶部背景颜色，文字颜色等 
  "window":{
    //下拉 loading 的样式，仅支持 dark / light
    "backgroundTextStyle":"light",
    //导航栏背景颜色
    "navigationBarBackgroundColor": "#37383c",
    //导航连标题内容
    "navigationBarTitleText": "大喵的小店",
    //导航栏标题颜色
    "navigationBarTextStyle":"ffffff",
    //窗口背景色
    "backgroundColor": "#eeeeee",
    //是否开启当前页面的下拉刷新
    "enablePullDownRefresh": true
  },
  //底部tab栏目的表现
    "tabBar": {
      //tab 上的文字默认颜色，仅支持十六进制颜色
      "color": "#b7b7b7",
      //tab 上的文字选中时的颜色，仅支持十六进制颜色
      "selectedColor": "#AB956D",
      //tabbar上边框的颜色
      "borderStyle": "#f5f5f5",
      //tab 的背景色，仅支持十六进制颜色
      "backgroundColor": "#f5f5f5",
      //tab 的列表,最少2个、最多5个 tab
      "list": [
        {
          //页面路径，必须在 pages 中先定义
          "pagePath": "page/component/index",
          //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon
          "iconPath": "image/12.png",
          //选中时的图片路径
          "selectedIconPath": "image/11.png",
          //tab 上按钮文字
          "text": "首页"
        },
        {
          "pagePath": "page/component/category/category",
          "iconPath": "image/22.png",
          "selectedIconPath": "image/21.png",
          "text": "分类"
        },
        {
          "pagePath": "page/component/cart/cart",
          "iconPath": "image/32.png",
          "selectedIconPath": "image/31.png",
          "text": "购物车"
        },
        {
          "pagePath": "page/component/user/user",
          "iconPath": "image/42.png",
          "selectedIconPath": "image/41.png",
          "text": "我的"
        }
      ]
    },
    //网络超时时间
      "networkTimeout": {
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
      },
      //是否开启debug模式，默认是关闭的
      "debug": false
}

2、小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

 

3、pages文件夹下面都是一个个的页面，一般新建项目之后pages下会有一个index文件夹里面包含4个文件，分别是：index.js,index.json,index.wxml,index.wss,即，每个页面都是有这四个文件组成的，index是首页，新建页面可以自定义，所有页面都需要在app.json的pages字段中描述，如下图：

步骤5：新建页面，以及页面各个文件描述，以下描述index页面，以及user页面

1、新建页面：

2、index页面详解：index.js,index.json,index.wxml,index.wss

• 关于首页底部tab栏目的表现、窗口背景色、导航栏的配置请详见步骤4，app.json中的描述
• 网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色，其中 WXML 充当的就是 HTML 的角色，wss充当的就是CSS的角色
• index.js：

1. 页面初始化：
   data是页面初始数据，onLoad生命周期回调—监听页面加载，类似还有onShow，onReady，onHide等
   

• 一个服务除界面展示，还需要和用户做交互：响应用户的点击、获取用户的位置等等。通过编写 JS 脚本文件来处理用户的操作例如：

标签切换：
js代码：
 
对应的wxml代码：


跳转至详情页：点击图片或者文字页面跳转
js代码：

对应的wxml代码：

• index.wxml：描述当前这个页面的结构，采用MVVM 的开发模式，js只需要管理状态
• index.wss：WXSS 用来决定 WXML 的组件应该怎么显示：
  
  
  
• user页面：
  
  js：

  //index.js
  //获取应用实例
  var app = getApp()
  var myData = require('../../utils/data')
  var util = require('../../utils/util')
  
  Page({
    // 页面初始数据
    data: {
  
    },
    // 地址编辑
    editAddr : function(e){
      console.log(e)
      wx.navigateTo({
        url:'../edit_addr/edit_addr?addrid='+e.currentTarget.dataset.addrid
      })
    },
    onLoad() {
      var self = this;
      /**
       * 获取用户信息
       */
      // wx.getUserInfo({
      //   success: function (res) {
      //     self.setData({
      //       thumb: res.userInfo.avatarUrl,
      //       nickname: res.userInfo.nickName
      //     })
      //   }
      // })
    }
  })
  

  wxml：
   

  
  
  
    
      
          
               
      
      
        
          昵称：
        
         
      
    
  
   
      【地址管理】
      
        
            {{item}}
            
         
      
      新增地址 +
   
    
  

  获取用户信息：最开始我用的wx.getUserInfo，但是小程序目前在测试版和体验版限制通过wx.getUserInfo({})获取弹出授权框。
  
  
   

   

如需完整项目源码请联系我，后续会更后端篇。。。>_<