微信小程序学习笔记（一）之框架及工具

一、app.json的配置

1. 决定页面文件路径

微信小程序的页面路径都需要在app.json配置文件中配置一下。配置完页面路径后，会自动生成对应的文件夹及文件。

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/icon/icon"
  ]

2. 配置窗口表现

"window":{
    "backgroundColor":"#000",                    //窗口的背景色
    "backgroundTextStyle":"light",               //下拉背景字体、loading图样式，仅dark/light
    "navigationBarBackgroundColor": "#fff",      //导航栏背景颜色
    "navigationBarTitleText": "Ocean",           //导航栏标题文字
    "navigationBarTextStyle":"black"             //导航栏标题文字颜色，仅black/white
    "enablePullDownRefresh":true                 //是否开启下拉刷新
  }

3. 配置tab标签导航

"tabBar":{
    "color":"#000000",                           //tab上的文字默认颜色
    "backgroundColor":"#ffffff",                 //tab的背景色
    "selectedColor": "#3cc51f",                  //tab上的文字选中时的颜色
    "position":"bottom",
    "borderStyle":"black",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "image/首页.png",
        "selectedIconPath": "image/首页.png",
        "text": "首页"
      },{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "image/游记.png",
      "selectedIconPath": "image/游记.png"
    },{
        "pagePath": "pages/icon/icon",
        "iconPath": "image/想去.png",
        "selectedIconPath": "image/想去.png",
        "text": "图标"
      } 
    ]
  }

---

注意： pages里面的第一个页面必须在list里面，否则标签导航不会显示。

4. 设置网络超时时间

"networkTimeout": {
    "request": 10000,                        //wx.request的超时时间，默认60000ms
    "downloadFile": 10000                    //wx.downloadFile的超时时间
    "uploadFile": 10000 
    "connectSocket":10000         
  },

5. 配置debug模式

"debug": true,

注意： 开启debug模式时，调试信息会更加详细，方便调试。如果小程序正常运行时，则需要将debug模式关闭。

二、App()函数使用

App() 函数用来注册一个小程序，被放在一个app.js全局文件中。接受一个 Object 参数，其指定小程序的生命周期回调、全局函数、全局数据等。

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

注意：

1. App()函数必须在app.js中注册，且不能注册多个。
2. 不要在定义App()函数中调用getApp(),使用this就可以拿到App实例。
3. 不要在onLaunch的时候调用getCurrentPages()，此时pages还没有生成。
4. 通过getApp()获得实例后，不要私自调用生命周期函数。

三、Page()函数使用

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   * wx.stopPullDownRefresh可以停止当前页面的下拉刷新
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   * 
   */
  onShareAppMessage: function () {
    
  }
})

四、数据绑定

data对象可以初始化页面要用到的函数，data会以JSON的形式由逻辑层传至渲染层，所以其对象必须是可以转成JSON的格式：字符串、数组、布尔值、对象和数组。

Page({
  data: {
    name:"jenny"
  })

<view>{{name}}</view>

1. 组件属性绑定

Page({
  data: {
    id:1
  })

<view id="item-{{id}}">hhh</view>

2. 控制属性绑定

Page({
  data: {
    condition：true
  })

<view wx:if="{{condition}}">hhh</view>

3. 关键词绑定

<checkbox checked="{{false}}">hhh</checkbox>

注意： 不要直接写checked=“false”

五、wx:if条件判断

1. 判断单个组件

<view wx:if="{{lenth>50}}">hhh</view>
<view wx:elif="{{lenth>20}}">heiheihei</view>
<view wx:else>xixixi</view>

2. 判断多个组件

<block wx:if="{{true}}">
<view>姓名</view>
<view>学号</view>
</block>

六、wx:for列表渲染

1. 判断单个组件

wx:for绑定一个数组。数组的当前项下标变量名默认为index，当前项的变量名默认为item。

<view wx:for="{{students}}">
	{{index}}:{{item.name}}
</view>

Page({
	data:{
		students:[{
			name='Jenny'
		},{
			name='Peter'
		}]
	}
})

可以更改变量名。

<view wx:for="{{students}}" wx:for-index="idx" wx:for-item="student">
	{{idx}}:{{student.name}}
</view>

2. 判断多个组件

<block wx:for="{{[100,200,300]}}">
<view>{{index}}:</view>
<view>{{item.name}}</view>
</block>

七、定义和使用模板

模板是为了解决页面里的代码重复的问题，提供了模板机制，把一些可以重复使用的代码放置在模板里进行定义，定义后就可以在界面里使用。

1. 定义模板

模板是通过name属性来标识的。下面定义了一个以student为名的模板。

<template name="student">
	<text>{{name}}</text>
</template>

2. 使用模板

import引用可以将有模板功能的页面文件引入到要使用的模板的页面里。通过is属性来查找head这个模板并使用，data属性传入需要传入的值。

<import src="template.wxml"/>
<template is="student" data="{{student}}">
<block wx:for="{{[1,2,3,4]}}">
	<template is="{{item%2==0? student,color}}"/>
</block>

八、include引用文件

include的引用功能是引用除template模板代码之外的全部代码，相当于把引用文件的代码复制过来

<include src="navigator.wxml"/>
<view>这里是正文</view>
<include src="footer.wxml"/>