初识小程序

项目目录及文件构成

项目中包括三个app开头的文件，pages目录，utils目录，每个页面都是一个目录，目录名都是唯一的页面名，其下再由以页面名为前缀的2~4个文件组成。大概可以归纳如下：

                                           index.wxml                                                      
app.js                            index--->index.js
                                           index.wxss
                                           index.json
app.json --->小程序目录--->pages--->.......
                                          logs.js
app.wxss                          logs--->logs.wxml
                                          logs.wxss

对文件进行说明：
app.js是小程序脚本代码，用来监听并处理小程序的生命周期函数、声明全局变量
app.json是对整个小程序的全局配置，配置小程序是由哪些页面组成，配置小程序的窗口背景色等，不可添加任何注释
app.wxss是整个小程序的公共样式表
其中app.js和app.json是必需的
小程序页面是由同路径下同名但不同后缀的2~4个文件组成：
.js后缀的文件是页面脚本文件，该文件实现页面逻辑和事件处理
.json后缀的文件是页面配置文件
.wxss后缀的文件是页面样式表文件
.wxml后缀的文件是页面结构文件，该文件与.wxss文件一起创建出页面
其中.js和.wxml文件是必需的
小程序线程架构
典型的app.js代码结构如下：

App(
    onLaunch:function(){
        //启动时执行的初始化工作
    },
    onShow:function(){
        //小程序启动或从后台进入前台时，触发执行的操作
    },
    onHide:function(){
      //小程序从前台进入后台时，触发执行的操作
   },
   globalConf:{
   indexData:'',
   matchDate:''
   },
   dataCache:{},
   globalData:'I am global data
})

典型的一个页面pagfe.js代码结构：

Page({
    Data:{
        Text:'This is page data.'
    }
    onLoad:function(options){
        //页面加载时执行的初始化工作
    }
    onReady:function(){
    //页面就绪后出发执行的操作
    },
    onShow:function(){
    //页面打开时，触发执行的操作
    }，
    onHide:function(){
    //页面隐藏时，触发执行的操作
    },
    onUnLoad:function(){
    //页面关闭时，触发执行的操作
    },
    //Event handler
    viewTap:function(){
        this.setData({
            text:'set some data for updating view.'
            })
        },
    })

每个小程序分为2个线程，view与appServer，view线程负责解析渲染页面(wxml和wxss文件)，appServer线程负责运行js。appServer线程运行在jsCore中(安卓下运行在X5中，开发工具运行在nwjs中)，由于js不跑在webview里，就不能直接操作DOM和BOM，所以也就没有window全局变量

示例代码
在项目中新添加一个页面，在pages目录下新建demo目录，在其中加入demo.wxml，demo.js，

demo.wxml：

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section_title">switch</view>
    <switch name="switch" />
  </view>

  <view class="section section_gap">
    <view class="section_title">slider</view>
    <slider name="slider" show-value></slider>
  </view>

  <view class="section">
    <view class="section_title">input</view>
    <input name="input" placeholder="please input here"></input>
  </view>

  <view class="section section_gap">
    <view class="section_title">radio</view>
    <radio-group name="radio_group">
      <label>
        <radio value="radio1"></radio>radio1</label>
      <label>
        <radio value="radio2"></radio>radio2</label>
    </radio-group>
  </view>

  <view class="section section_gap">
    <view class="section_title">checkbox</view>
    <checkbox-group name="checkbox">
      <label>
        <checkbox value="checkbox1"></checkbox>checkbox1</label>
      <label>
        <checkbox value="checkbox2"></checkbox>checkbox2</label>
    </checkbox-group>
  </view>

  <view class="btn_area">
    <button form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
  </view>

</form>

demo.js代码块：

Page({

 formSubmit:function(e){
   console.log('form发生了submit事件，携带数据为:',e.detail.value)
 },
 formReset: function () {
   console.log('form发生了formReset事件')
 },

})

在app.json中pages配置项添加demo页面：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

在小程序适当页面的.wxml中添加入口并在该页面的.js文件中添加到新页面的入口。比如，在index.wxml中添加到demo页面入口展现的代码：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view id='tapDemo' bindtap='bindViewDemo'>Demo页</view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

在index.js中添加bindViewDemo事件处理逻辑：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //新添加的页面入口导航示例代码
  bindViewDemo:function(){
    wx.navigateTo({
      url: '../demo/demo',
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

运行效果：

开发框架：MINA
参考书籍：《小程序 巧应用》