基础篇

目录结构

• 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page；
  
  小程序主体部分分别是app.js[小程序逻辑]、app.wxss[小程序公共样式]、app.json[小程序公共配置]
  
  小程序的pages页面类型分别是js[页面逻辑]、wxml[页面结构]、wxss[页面样式表]、json[页面配置]
  
  项目目录如下：

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

全局配置

主要配置如下

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

启动小程序

微信小程序有一个App这个方法，所有的页面都可以通过getApp()共享这个实例；所以我们可以在这个App方法上进行绑定一些公共方法；

这里说一下注册小程序时候的几个生命周期函数

// app.js
App({
  //监听小程序初始化 全局只触发一次
  onLaunch(options) {
    // Do something initial when launch.
  },
  //监听小程序启动或切前台 只要触发前后台切换都i触发这个该函数
  onShow(options) {
    // Do something when show.
  },
  //监听小程序启动或切前台 只要触发前后台切换都i触发这个该函数
  onHide() {
    // Do something when hide.
  },
  //小程序发生脚本错误或 API 调用报错时触发
  onError(msg) {
    console.log(msg)
  },
  //小程序要打开的页面不存在时触发
  onPageNotFound(){
      
  },
  globalData: \'I am global data\'
})

页面加载

小程序中的每个页面，都需要在页面对应的 js 文件中调用 Page 方法注册页面示例，指定页面的初始数据、生命周期回调、事件处理函数等

这里说一下注册页面时候的几个生命周期函数

// index.js
Page({
  //页面的初始数据 通过this.setData({});进行数据的绑定
  data: {
    text: \'This is page data.\'
  },
  //【页面加载时触发】。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 思考：页面tabBar页面只会注册一次；
  onLoad(options) {
    // Do some initialize when page load.
  },
  //【页面初次渲染完成时触发】。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
  onReady() {
    // Do something when page ready.
  },
  //页面显示/切入前台时触发。
  onShow() {
    // Do something when page show.
  },
  //页面隐藏/切入后台时触发。
  onHide() {
    // Do something when page hide.
  },
  //页面卸载时触发。
  onUnload() {
    // Do something when page close.
  },
  //监听用户下拉刷新事件。
  onPullDownRefresh() {
    // Do something when pull down.
  },
  //监听用户上拉触底事件。
  onReachBottom() {
    // Do something when page reach bottom.
  },
  /*
  * 用户进行分享事件监听
  * @params {object} options
  *         {string} from button or menu
  *         {object} target 如果是button 则可用data-\'string\' 标记分享类型 target.dataset 判断不同的分享类型
  */
  onShareAppMessage(options) {
    // return custom share data when user share.
  },
  //监听用户滑动页面事件。
  onPageScroll() {
    // Do something when page scroll
  },
  //监听页面改变大小事件。
  onResize() {
    // Do something when page resize
  }
});

页面路由

了解了整个小程序的结构后我们现在看下小程序是如何做各个页面之前的跳转的；如其他框架一样小程序也会有内部跳转组件以及js做跳转方式；

• 打开新页面

//组件
<view class="btn-area">
  <navigator
    url="/page/navigate/navigate?title=navigate"
    hover-class="navigator-hover"
  >
//js
wx.navigateTo({
  // 跳转url
  url: \'test?id=1\',
  //调用成功回调
  success(){
      
  },
  //调用失败回调
  fail(){
      
  },
  //不管成功还是失败都进行回调
  complete(){
      
  }
})；

• 页面重定向

//组件
<navigator
   url="../../redirect/redirect/redirect?title=redirect"
   open-type="redirect"
   hover-class="other-navigator-hover"
 >
//js
wx.redirectTo({
 // 跳转url
 url: \'test?id=1\',
 //调用成功回调
 success(){
     
 },
 //调用失败回调
 fail(){
     
 },
 //不管成功还是失败都进行回调
 complete(){
     
 }
})；

• tab栏之前的跳转

 //组件
 <navigator
    url="../../switchTab/switchTab?title=redirect"
    open-type="switchTab"
    hover-class="other-navigator-hover"
  >
 //js
 wx.switchTab({
  // 跳转url
  url: \'test?id=1\',
  //调用成功回调
  success(){
      
  },
  //调用失败回调
  fail(){
      
  },
  //不管成功还是失败都进行回调
  complete(){
      
  }
})；

渲染

• 数据渲染

<!--wxml-->
<view>{{message}}</view>
// page.js
Page({
  data: {
    message: \'Hello MINA!\'
  }
});

• 列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

• 条件渲染

<!--wxml-->
<view wx:if="{{view == \'WEBVIEW\'}}">WEBVIEW</view>
<view wx:elif="{{view == \'APP\'}}">APP</view>
<view wx:else="{{view == \'MINA\'}}">MINA</view>
// page.js
Page({
  data: {
    view: \'MINA\'
  }
})

• 模板
  
  WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。可用 方式导入

<!--wxml-->
<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: \'Hulk\', lastName: \'Hu\'},
    staffB: {firstName: \'Shang\', lastName: \'You\'},
    staffC: {firstName: \'Gideon\', lastName: \'Lin\'}
  }
});

• 组合
  
  为了更加优雅的进行一些条件渲染逻辑书写；我们可硬包裹逻辑；这个标签是不会进行渲染的，只起到包裹作用；

<block wx:if="{{a>0}}">
    <view>a是个大于0的数</view>
</block>
<block wx:else>
    <view>a是个小于0的数</view>
</block>

如果有比较复杂的逻辑，我还是建议进行模板引入;这样觉得逻辑会更加清晰

<block wx:if="{{tutorInfo.selectedIndex}}">
    <template is="tutortempw" data="{{...tutorInfo}}"></template>
</block>
<block wx:else>
    other
</block>

WXS

咋一看感觉wxs跟wxss有某种关联，实则没有；WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。应用场景可以用在对一个目标值进行格式化输出；
作用：WXS 是在微信小程序 page-frame 上运行的，在性能上的优化是在一定程度上缓解了微信小程序架构中跨线程通信的开销。

// filter.wxs
var dateFormat = function(date) {
    var dates = date.split(\'/\');
    return dates[0] + "年" + dates[1] + "月" + dates[2] + "日";
}
var moneyFormat = function(money) {
    return money.toFixed(2);
}
/*
 * 导出
 */
module.exports = {
    dateFormat: dateFormat
}
//index.js  
Page({
    data: {
        date: "2018/8/5",
    }
});
<!-- src引入filter.wxs, module给模块起名 -->
<wxs src="../../filters/filter.wxs" module="filter" />
<!-- 调用filter模块里的dateFormat函数 -->
<view>{{filter.dateFormat(date)}}</view>