微信小程序学习笔记，知识点全面概括总结

npm init -y
npm i @vant/weapp@1.3.3 -S --production
npm i --save miniprogram-api-promise@1.0.4
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

新建项目或者导入项目后把AppID
新建页面：在 app.json->pages 中新增页面的路径
修改项目首页： app.json -> pages中的页面路径第一个即是首页

1. pages 所有小程序的页面文件夹
2. utils 工具性质的模块
3. app.js 整个小程序项目的入口文件
4. app.json 全局配置文件
5. app.wxss 全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 页面是否允许被微信索引
8. .js 文件：页面脚本文件，存放页面的数据、事件处理函数等
9. .json 文件：当前页面的配置文件，配置窗口的外观
10. .wxml 文件：页面的模板结构文件，标签语言
11. .wxss 文件：样式表文件，样式语言

① 小程序启动的过程：
  把小程序的代码包下载到本地
  解析 app.json 全局配置文件
  执行 app.js 小程序入口文件，调用 App() 创建小程序实例
  渲染小程序首页；小程序启动完成
② 某个页面渲染的过程：
  加载解析页面的 .json 配置文件
  加载页面的 .wxml 模板和 .wxss 样式
  执行页面的 .js 文件，调用 Page() 创建页面实例
  页面渲染完成

视图组件(view / scroll-view滚动视图 / swiper 轮播图和 swiper-item)
基础内容：text文本组件、rich-text富文本组件、button组件、image组件、表单组件、导航组件、媒体组件、map地图组件、画布组件。

事件监听 API：以 on 开头，用来监听某些事件的触发
同步 API：以 Sync 结尾的 API
异步 API：需要通过 success、fail、complete 回调接收调用的结果

Page({ data: {
     info: 'hello world',
     imgSrc: 'https://.....jpg',
     randomNum2: Math.random().toFixed(2) // 随机数保留两位小数
}})
<view class="username">{{info}}</view>
<image src="{{ imgSrc }}" mode="widthFix"></image>
<view>{{ randomNum1 >= 5 ? '随机数字大于5' : '随机数字小于5' }}</view>

tap：bindtap 或 bind:tap
input：bindinput 或 bind:input
change：bindchange 或 bind:change

type：事件类型
timeStamp：页面打开到触发事件所经过的毫秒数
target： 触发该事件的源头组件，属性值集合
currentTarget：当前事件绑定的组件，属性值集合
detail：额外的信息

双向数据绑定：
步骤: 
   ① 定义数据
   ② 渲染结构, 绑定 data 中的数据
   ③ 美化样式
   ④ 监听 input 事件

代码:
  data: {   msg: '请输入...'   }
  <input class="ipt2" placeholder="{{msg}}" bindinput="inputHandler"></input>
  inputHandler (e) {
    console.log(e.detail.value);
  },

onAddHandle: function () {
   this.setData({
      count: this.data.count + 1 // 在原来值基础上+1
})}

<button bindtap="onBtnString" data-info="2">事件传参-拼接字符串</button>

onBtnString (e) {
   this.setData({
      count: this.data.count + e.target.dataset.info
})}

<block wx:if="{{ true }}">

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

wx:if 搭配 wx:elif 、 wx:else 

data:    type:2
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

<view hidden="{{flag}}">true隐藏，false显示</view>

wx:if 
动态创建和移除元素，控制元素展示 / 隐藏
场景：控制条件复杂时使用

hidden
切换样式控制展示与隐藏，节点一直存在
场景：频繁切换

data: {  arr1: ['苹果','华为','小米']  }
<view wx:for="{{ arr1 }}"  wx:key="id">
      索引是 {{ index }} 当前项是： {{ item }}
</view>

<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="m">
      索引是 {{ i }} 当前项是： {{ m }}
</view>

导航栏；背景区；页面主体区：
"navigationBarTitleText": "导航栏显示的标题",  
"navigationBarBackgroundColor": "#fff",  导航栏背景色:16进制
"navigationBarTextStyle":"black", 导航栏标题颜色: black/white
"backgroundTextStyle":"light",  下拉loading的样式 dark/light
"backgroundColor": "#efefef",  下拉窗口的背景色
"enablePullDownRefresh": true,  开启下拉刷新
"onReachBottomDistance": 50  上拉触底的距离,获取下页数据

backgroundColor ： tabBar背景色
borderStyle：上边框的颜色
selectedColor：选中时文字的颜色
color：未选中颜色

"tabBar":{  // 与window同级
  "list":[{
     "pagePath":"页面路径",
     "text":"底部文字",
     "iconPath":"未激活图标地址",
     "selectedIconPath":"激活图标地址"
},{},....]},

(只支持https;不能ip或本地;必须ICP备案)
小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改 request 域名

onTapGet () {
  wx.request({
     url: 'https://... .../api/get',   // 在request合法域名已配置
     method: 'GET',
     data: {  name: 'zs', age: 22  },  // 请求参数
  success: (res) => {                  // 请求成功的回调
     console.log(res)
}})

method: 'POST',

// 生命周期函数-->监听页面加载-->初始化页面的数据
onLoad: function (options) {
    this.onTapGet()  // 通过 this 调用上述方法
    this.onTapPost()
},

导航tabBar页面：
<navigator url="/页面路径" open-type="switchTab">链接文字</navigator>
非 tabBar 页面：
<navigator url="/页面路径" (open-type="navigate")>链接文字</navigator>
后退导航：
<navigator open-type="navigateBack" (delta="1")>返回上一页</navigator>

1. wx.switchTab()    方法：跳转到 tabBar 的页面
2. wx.navigateTo()   方法：跳转到非 tabBar 的页面
3. wx.navigateBack() 方法：返回上一页面或多级页面
 <button bindtap="goto">链接文字</button>
 goto () {
     wx.switchTab({     // wx.navigateTo({     // wx.navigateBack()
        url: '/ 跳转到页面路径',
  })},

<navigator url="/pages/info/info?name=zs&age=20">跳至info页面</navigator>
url: '/pages/info/info?name=李&gender=男',
定义 data:{ query: {} }   
onLoad 事件中获取参：this.setData({ query: options })

① 全局开启：app.json 的 window 中
② 局部开启：在页面的.json 配置文件
"enablePullDownRefresh": true

美化：
"backgroundColor": "#ccc",
"backgroundTextStyle": "dark/light"

onPullDownRefresh() 函数监听刷新
wx.stopPullDownRefresh() 关闭加载状态

onPullDownRefresh: function () {
    this.setData({
      count: 0
    })
    wx.stopPullDownRefresh()
},

onReachBottom() 函数监听页面的上拉触底事件
onReachBottomDistance 配置上拉触底的距离

data 定义一节流阀
请求方法中修改节流阀的值
在complete中修改值，成功失败都关闭
onReachBottom 判断节流阀的值

loading: false
this.setData({  loading: true  })
this.setData({isloading: false})
if(this.data.isloading) return

onLaunch：小程序启动，渲染完成时触发时  (全局只触发一次)
onShow：小程序启动 或 从后台进入前台时  (可触发多次)
onHide：小程序隐藏起来 或 从前台进入后台时   (可触发多次)
onError：出现异常时触发

onload()：监听页面加载。一个页面调一次，可获取当前页面路径中的参数； 
onShow()：监听页面显示 / 切入前台；
onReady()：监听页面初次渲染完成。一个页面调一次，页面可以和视图层进行交互；
onHide()：监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面；
onUnload() 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时；一次

wxs数据类型：number/string/boolean/object /function/array/date/regexp 
不支持es6及以上的语法：支持 var/function 函数等 ES5 语法
遵循ComminJS规范：module 对象、require() 函数、module.exports 对象

<view>{{ m1.toUpper(username) }}</view>
<wxs module="m1">
   module.exports.toUpper = function(str) {
      return str.toUpperCase()  }
</wxs>

//   1. 新建文件，定义方法，暴露成员  utils/tools.wxs
 function toLower(str) {  return str.toLowerCase()  }
 module.exports = { toLower: toLower  }
//   2. 使用外联式引入外部的wxs文件
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
//   3. 调用 m2 模块的方法
<view>{{ m2.toLower(country) }}</view>

场景：过滤器<view>{{ m2.toLower(country) }}</view>
隔离性：不能调用 js 定义的函数和小程序的 API
性能好：iOS 设备上WXS 比 JavaScript 代码快 2 ~ 20 倍，Android 设备上无差异

局部引用：页面的 .json 文件中引用组件
全局引用：app.json 全局配置文件中引用组件
"usingComponents": {"my-test": "/components/test/test"}
my-test 就是组件使用时的标签名：<my-test></my-test>

组件的.json 中需要声明 "component": true,
组件的.js调用函数Component，页面是Page
组件事件处理函数需定义在methods，页面在Page下

修改组件的样式隔离选项：
Component({
   options: { styleIsolation: 'isolated'}
})

isolated启用隔离不会影响；
apply-shared页面样式可改变组件；
shared相互影响；

properties：对外属性，接收外界传递到组件的数据
properties: {
    max: { type: Number, value: 10 },  // 完整写法
    min: Number   // 简化
},

data 和 properties 区别？  都可读可写
data 是组件私有数据，properties是外界传入的数据

Components({
 observers: {
   '字段A， 字段B': function(A的新值， B的新值) {}
})

监听个别属性
'rgb.r, rgb.g, rgb.b': function (r, g, b){
  this.setData({
   fullColor: `${r}, ${g}, ${b}`  
  })
}

通配符监听对象的所有属性
'rgb.**': function (obj){
  this.setData({
   fullColor: `${obj.r}, ${obj.g}, ${obj.b}`  
  })
}

使用：
Component 构造器的 options 节点中，指定 pureDataPattern 为一个 正则表达式
Component({
  options: {  pureDataPattern: /^_/  },
  data: {   _b: true // 纯数据字段  }
})

组件生命周期定义，在lifetimes 字段内：
lifetimes: { 
    created(){ },
    attached() { }
}

组件所在页面生命周期，定义在 pageLifetimes 节点：
Component({
   pageLifetimes: {
     show:  function () {  },       // 页面被展示
     hide:  function () {  },       // 页面被隐藏
     resize:  function (size) {  }  // 页面尺寸变化
}})

created： 监听组件实例被创建；(用于给组件的 this 添加自定义的属性)
attached：监听组件初始化完毕 / 进入页面节点树；(发请求获取初始数据)
ready：监听组件在视图层布局完成；(可操作页面)
moved：监听组件实例被移动到节点树另个位置；
detached：监听组件实例从页面节点树被移除；(清除定时器)
error：监听组件方法抛出错误；

<!-- 组件的封装者 -->
<view>
  <view>这里是组件的内部结构</view>
  <!-- 封装组件的时候，使用slot进行占位 -->
  <slot></slot>
</view>

<!-- 组件的使用者 -->
<my-test4>
  <!-- 使用组件的时候，这部分被放在slot中 -->
  <view>通过插槽填充的内容</view>
</my-test4>

启用 多个插槽
Component({
  options: {
    multipleSolts: true
  }
})


定义 多个插槽：
<view class="wrapper">
   <slot name="before"></slot>
   <slot name="after"></slot>
</view>

<my-test4>
  <view slot="before">1111</view>
  <view slot="after">2222</view>
</my-test4>

父组件：定义->传出
     data: {count: 0}
     <my-test5 count="{{count}}">111</my-test5>
子组件接收：properties: {count: Number}

父组件js中定义函数，通过父组件wxml自定义事件传给子组件
子组件js中，通过this.triggerEvent('自定义事件名',{ /*参数对象*/})
将数据发送到父组件，父组件js中通过e.detail获取子组件传的数据


syncCount(){}

<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>

this.triggerEvent('sync',{value:this.properties.count+1})

syncCount(e){
    this.setData({
      count: e.detail.value
})}

父组件通过 this.selectComponent() 获取子组件实例对象，访问子组件的数据和方法;
给子组件添加类或id -> 父组件绑定事件获取实例

<my-test5 class="customA" ... ... ></my-test5>

<button bindtap="getChild">获取组件实例</button>

getChild() {
     const child = this.selectComponent('.customA')
}

创建：创建behaviors文件夹 -> 新建my-behavior.js文件
导入：const myBehavior = required("../../behaviors/my-behavior")
            Component({  myBehavior: [myBehavior],  )}
使用：<view>在组件中共享的behavior是： {{username}}</view>

 module.exports = Behavior({
   properties: {},
   data: { username: 'zs' },
   methods: {},
   behaviors{}
   // 其他节点/生命周期函数...
})

安装、app.json引入、wxml使用：
1. 初始化 package.json ，项目根目录执行 npm init -y
2. npm i @vant/weapp@1.3.3 -S --production
3. 工具 -> 构建npm
4. 将 app.json 中的 "style": "v2" 去除
5. 在 app.json 的 "usingComponents": {} 中引入需要的组件
6. 在wxml 中使用

定制全局主题样式：page {}节点定义
<van-button type="danger">危险按钮</van-button>
page { 
  --button-danger-background-color: #c00000;
}

1. 安装 npm i --save miniprogram-api-promise@1.0.4
2. 先删除原有的miniprogram_npm，重新构建npm包
3. app.js入口文件  导入并执行代码
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp) // 参数wx顶级对象，wxp指向一个空对象

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
MobX 安装完毕，删除 miniprogram_npm 目录，重新构建 npm
创建MobX的Store实例：根目录下新建store文件夹，并新建 store.js 文件
在引用store的页面或组件的js文件内：绑定store里的成员
在页面中使用Store 中的成员

1. store 导入安装的插件
import { observable } from 'mobx-miniprogram'
export const store = observable({
  numA: 1,     //  2. 定义数据字段
  numB: 2,
  get sum() {     //  3. get 定义计算属性
    return this.numA + this.numB
  },
  //  4. 定义 actions 方法，用来修改 store 中的数据 
  updateNum1: action(function (step) {
    this.numA += store
  }),
})

2. 引用 store 的页面的 .js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

onLoad: function (options) {
    this.storeBindings = createStoreBindings(this, {
      store,   // 数据源
      //  5. 绑定计算属性和字段数据
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNum1']    // 映射方法
    })
  },

  btnHandler1(e) {
      this.updateNum1(e.target.dataset.step)
  },

pages 是主包的所有页面
在 app.json 中, 新增 subpackages 的节点, 将放到分包的页面写入 subpackages 数组元素中.

"subPackages": [
  {
    "root": "pagA",  // 分包根目录
    "name": "p1",    // 分包的别名
    "pages": [
         "pages/cat/cat",
         "pages/dog/dog"
    ]
  }
],

"independent": true

在 app.json 中，使用 preloadRule 规则，全加起来限额2M
"preloadRule": {             // 规则
  "page/contact/conyact": {  // 页面路径
    "network": "all",        // 指定网络模式
   "packages": ["p1"]        // 下载哪些分包
  }
},