一、配置文件

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

各配置项的含义:

1. pages：当前小程序所有页面路径

2. window：小程序所有页面的顶部背景颜色，文字颜色定义等

3. tabBar：底部 tab 栏的表现

4. subPackages：分包加载，在构建时打包成不同的分包，用户在使用时按需进行加载。默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

project.config.json是工具配置文件，在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

二、文件类型

1.JSON

配置文件，JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据，JSON的Key必须包裹在一个双引号中，无法使用注释。

2.WXML

模板文件，类似HTML，由标签、属性等构成。

3.WXSS

样式文件，具有 CSS 大部分的特性。
1）新增尺寸单位rpx
2）提供了全局样式和局部样式，全局样式app.wxss会作用于小程序的所有页面，局部样式page.wxss 仅对当前页面生效

4.JS

页面交互逻辑，如响应用户的点击、获取用户的位置等。可以在 JS 中调用小程序提供的API，例如获取用户信息、本地存储、微信支付等。

微信原生 API有以下类型：

1）事件监听API

以 on 开头的 API 用来监听某个事件是否触发，如：wx.onCompassChange，它接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将数据以参数形式传入。

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

2）同步API

以 Sync 结尾的 API 都是同步 API，如 wx.setStorageSync，它的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

3）异步API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数。

wx.login({
  success(res) {
    console.log(res.code)
  }
})

当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

三、小程序的运行环境

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端Native做中转，逻辑层发送网络请求也经由Native转发。

打开小程序到显示第一个页面的过程：
1. 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
2. 小程序启动之后，在 app.js 中定义的 App 实例的 onLaunch 回调会被执行：

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

3. 通过 app.json 的 pages 字段就可以知道小程序的页面路径，pages 字段的第一个路径就是小程序的首页。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

4. 微信客户端把首页的代码装载进来，pages/index/index 下包括4种文件，微信客户端会先根据 index.json 配置生成一个界面，顶部的颜色和文字都可以在这个 json 文件里定义好,紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 index.js:

Page({
  data: { // 参与页面渲染的数据
    user:""
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出这个首页。

四、其他

1.globalData和storage的区别

globalData全局的临时变量，是内存中的数据，不能持久化，关闭小程序后 globaData就没了。
而storage是可以持久化的，是存储在本地的数据，小程序重启后，还是可以找到的。

2. 小程序在模板语法中使用js方法无效问题

在wxml页面中，只能在插值{{ }}中写简单的js表达式，而不能调用js方法，例如想取出一个字符串的最后一位，不能调用slice()方法。通常的解决办法是在page的data对象中先把这个字符串截取好赋给某个变量，在页面中使用这个变量，如果变量多了要定义很多次。

解决办法：WXS
WXS（WeiXin Script）是小程序的一套脚本语言，它是为了满足能在页面中使用js而存在的。

使用方法：
①写好wxs文件，导出要使用的方法或变量
②在待使用页面引入
③在插值{{}}中使用tools.方法名(参数)

示例如下：

// util.wxs文件
function indexOf(arr, value) {
   if (arr.indexOf(value) 

// 引入

// 使用

{{tools.indexOf([1, 2, 3], 1)  '包含' : '不包含'}}

3. 页面跳转，通过事件的发布订阅，实现数据传递

跳转到指定页面，通过wx.navigateTo()

wx.navigateTo({
        url: '/page/entry/address/index',
        success: function (res) {
        //通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptData', {
            type
          })
        }
})

进入当前跳转页面，onload()

onLoad: function () {
    const eventChannel = tShopfas.getOpenerEventChannel()
    //监听acceptData事件，获取上一个页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptData', function(data) {
      console.log(data)
    })
  }

4. onLoad与onShow的区别

onLoad: 页面加载时触发，从二级页面回来时不会触发，数据实时性要求不高可以onLoad里面触发对应的请求，可以通过options获取参数。
onShow:页面显示，切入前台触发，简单来说就是这个页面每出现一次（包括前进后退到这个页面）就调用一次，有内容修改时，把函数方法放在onShow可以使界面能及时更新。

5. 列表渲染（wx:for、wx:for-item、wx:key、wx:for-index的用法）
(1) wx:for
主要用于循环数组，进行列表渲染。在小程序中，数组当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

const cityList=[
      {"id": "35", "city": "广州", "code": "152900" },
      { "id": "38", "city": "深圳", "code": "210300" }
]

页面代码：

{{item.city}} {{item.code}}

(2) wx:for-item
如果数组是二维（多维）数组，需要多层嵌套wx:for，需要注意的是：在多层循环当中，内层循环会把外层循环的item覆盖掉，外层的item就取不到值。
为了弥补这个缺陷，定义了wx:for-item来指代数组当前项的别名。
(3) wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符。
当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保它们被重新排序，而不是重新创建，提高列表渲染时的效率。
(4) wx:for-index
使用wx:for-index来指代数组当前项下标的别名。

6.自定义组件
创建自定义组件的步骤：
(1) 新建自定义组件文件
在根目录的components文件夹，右键新建自定义组件目录

(2) 组件json文件配置

{
  "component": true, //这一组文件设为自定义组件
  "usingComponents": {}
}

(3) 组件wxss文件，因为全局样式不会自动导入组件内，若需要可导入
/* 自定义组件 */

@import "../../app.wxss";

在父组件中使用该自定义组件
(1) 在父组件json文件的usingComponents中导入组件

{
  "usingComponents": {
    "number-input":"../../../components/NumberInput"
  }
}

(2) 在父组件wxml文件中以组件名作为标签使用组件

父子组件通信
(1) 父传子
在父组件中的子组件标签添加属性，给子组件传递数据

子组件在js中通过properties接收，可以指定接收数据类型

Component({
  /**
   * 组件的属性列表
   */
      properties: {
           number:Number, //子组件通过properties接收，可以指定接收数据类型
      }
})

(2) 子传父
子组件用tShopfas.triggerEvent('自定义事件', '传递的参数')，发布自定义事件submit

tShopfas.triggerEvent("submit", tShopfas.properties.number)

在父组件中的子组件标签通过bind监听自定义事件

上一步执行后，自定义事件绑定的函数submitPcs就会执行，同时接收子组件传过来的数据。

submitPcs(e) {
    tShopfas.setData({
      pcs: e.detail
    })
}

7. 页面跳转
wx.switchTab: 跳转到tabBar页面，并关闭其他非tabBar页面，跳转的url不能带参数。
wx.navigateTo: 保留当前页面，跳转到应用内的某个页面，url可以携带参数，但是不能跳转到tabBar页面，使用wx.navigateBack()可以返回原页面。

8.环境变量

const envVersion =__wxConfig.envVersion   // envVersion类型为字符串

envVersion: 'develop', //开发版
envVersion: 'trial', //体验版
envVersion: 'release', //正式版

9.微信登录
登录流程如下

1）授权用户信息

wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，必须填写
        success: (res) => {
          tShopfas.login(res) // 具体的登录逻辑
        },
        fail: (res) => {
          console.log(res)
        }
})

2）调用wx.login()获取用户登录凭证code（有效期五分钟）
3）调用后台接口完成登录

async login(data) {
const params = {
      iv: data.iv,
      encryptedData: data.encryptedData,
      code: tShopfas.data.code 
    }
    const res = await userApi.fastLogin(params)
    if (res && res.success) {
      //调用登录接口成功后存储token
      wx.setStorageSync('token', res.data)
    }
}

10.微信支付

wx.requestPayment({
  timeStamp: '', //时间戳
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

11.请求的封装
在微信小程序中使用wx.request()发送网络请求，为简化接口的调用做了一次封装，见utils/request.js。

const fetch = function(url, params, contentType,method='POST') {
  const App = getApp()
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method,
      header: {
        token: wx.getStorageSync('token'),
        'content-type': contentType||'application/json'
      },
      data: params,
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}