1. 使用小程序脚手架拉取代码,通过小程序开发工具导入代码
  2. 编辑pages/index下的文件
  3. 编辑index.wxml,编写页面UI
  4. 编辑index.wxss,编写页面样式
  5. 编辑index.js,编写页面逻辑,在js文件中有以下几个方面注意

    • 如何引入页面所需的公共库和公共组件

      在页面的顶部通过require引入页面所需要公共库和公共组件

      //公共库
      var utils = require('../../utils/utils');   
      //公共组件
      var addrPicker = require('../../components/addrPicker/addrPicker');
      var carPicker  = require('../../components/carPicker/carPicker');
      
    • 如何配置Page函数所需的参数

      调用小程序提供的Page函数初始化时,需要传入一个参数,该参数包含了的值如下:

      • 小程序页面的数据data
      • 状态变化时的回调函数如onLoad、onShow、onUnload等
      • 组件回调函数callback
      • 事件回调函数
      var pageSetting = {
          data:{},
          //页面状态变化回调函数
          onLoad:function(e){
          },
          onShow:function(e){
          },
          //组件回调函数
          callback:function(e){
              var _this = this;
              switch(arguments[0]){
                   case 'addrPicker':
                      console.log(arguments[1]);
                     //do something
                   break;
                  case 'carPicker':
                     var carInfoData = arguments[1];
                     //do something
                  break;
                  default:
                     break;
             }
          },
          //事件回调函数
          showList:function(e){
          }
          ...
       }
      
    • 如何配置各个组件的参数以及合并组件参数

      由于各个组件需要传入初始化参数,因此我们需要在此对各个组件进行参数配置,下面以地址选择组件为例,具体各个组件如何调用参考各个组件的文档

          var addrPickerOption = {
          data:{
              wiiAddrPicker:{
               'addrPickerUrl':'/wxapp_api/api',
               'addrPickerKey':{
                      'setDefault':'self:uc_api:address:setDefault',
                      'delAddr':'self:uc_api:address:del',             
                      'getAddrList':'self:uc_api:address:get',                                                                       
                      'addAddr':'self:uc_api:address:add'
                 },
               'addrPickerStyle':{
                      'btmBtnBgColor':'pink',
                      'btmBtnTextColor':'black',
                      'btnTextColor':'red',
                      'btnBorderColor':'black',
                      'defaultAddrBgImg':'http://mat1.gtimg.com/auto/css/techanwxapp/check-checked.png',
                      'unDefaultAddrBgImg':''
                 }
             }
         }
      } 
         //合并组件参数
         addrPicker = utils.assign(addrPicker,addrPickerOption);
      
    • 如何调用组件的回调函数

    如果某组件有回调函数,如某组件执行完成之后需要跟当前页面进行数据交互或者在当前页面进行某操作,可以在callback中进行配置当前组件的回调函数

        ...
        callback:function(e){
             var _this = this;
             switch(arguments[0]){
                  case 'addrPicker':
                  console.log(arguments[1]);
                     //do something
                   break;
                  case 'carPicker':
                     var carInfoData = arguments[1];
                     //do something
                      break;
                  default:
                     break;
             }
         }
         ...
    
    • 如何合并Page函数所需的参数

      我们需要将Page函数定义的参数与组件所需的参数合并之后一起传给Page函数

        //需要把所有调用的组件都与pageSetting进行合并
         pageSetting = utils.assign(pageSetting,addrPicker,carPicker)
      
    • 如何实例化Page函数

      Page(pageSetting)
      
  1. 编辑index.json,配置当前页面的标题、背景色等,参考https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

results matching ""

    No results matching ""