一、安装依赖包


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


二、小程序简介

  2.1 小程序与普通网页开发的区别?

运行环境的不同:网页运行在浏览器,小程序运行在微信环境;
API 不同:小程序无法调用 DOM 和 BOM 的 API,但可以调用微信环境提供的 API;
开发模式:网页是 浏览器+代码编辑器,小程序开发模式是小程序账号;

小程序开发账号官网: https://mp.weixin.qq.com/

  2.2 使用


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


  2.3 项目文件结构介绍


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 文件:样式表文件,样式语言


  2.4 运行机制:


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


  2.5 组件


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


  2.6 API:事件监听、同步异步API


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


三、数据绑定

    ① 在 .js 的 data 中定义数据
    ② 在 WXML 中 {{ }}使用数据


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>


四、事件对象属性

  4.1 常用事件


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

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


  4.2 bindtap 的使用

     1. 为组件绑定 tap 触摸事件,为文本框绑定输入事件
     2. 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event( e )来接收, 和 data 平级


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

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


  4.3 访问和修改 data 中的数据、data-* 事件传参

      1. js 中访问 data 中的数据:this.data.xxx

      2. js 中修改 data 中的数据:调用setData方法,重新赋值


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


      3. data-* 事件传参


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

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


五、事件绑定

  5.1 条件渲染

    1. block包裹性容器:条件成立渲染


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

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


    2. wx:if:动态创建移除元素控制展示与隐藏


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>


    3. hidden:控制展示与隐藏


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


    4. wx:if 和 hidden对比


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

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


  5.2 列表渲染

   1. wx:for  指定数组,进行循环渲染
   2. wx:for-index 手动指定索引名
   3. wx:for-item   手动指定当前项名
   4. wx:key="id"   提高渲染效率


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>


六、模板样式:rpx

布局使用 flex 布局,尺寸单位使用 rpx

    ( responsive pixel )是微信小程序独有的,用来解决屏适配的尺寸单位。

    实现原理:不同设备屏幕的大小不同,实现屏幕的自动适配, rpx 把所有设备的屏幕,在宽度上等分为 750 份, 1份就是1 rpx 。较小(大)的设备上,1 rpx 所代表的宽度较小(大)。

七、全局配置文件 app.json 及常用的配置项

   7.1 pages:当前小程序所有页面存放路径

   7.2 window:窗口外观


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


   7.3 tabBar:底部效果


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

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


   7.4 style:是否启用新版组件样式

    局部样式:当前页面配置json文件,会覆盖全局的配置

八、网络数据请求

   8.1 配置request合法域名


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


   8.2 发起GET请求:wx.request()


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


   8.3 发起GET请求 :wx.request() 


method: 'POST',


   8.4 页面刚加载时请求数据:onLoad 


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


九、跨域 和 Ajax 的说明

     跨域问题是基于浏览器的 Web 开发。小程序的宿主环境是微信客户端,所以不存在跨域的问题。
     Ajax 技术的核心是依赖于浏览器中的XMLHttpRequest 对象,由于小程序环境是微信,不能叫做“发起 Ajax 请求”,而是叫“发起网络数据请求”。

十、页面导航

   10.1 声明式导航


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


   10.2 编程式导航


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


  10.3 其他


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


十一、页面事件

   11.1 下拉刷新事件


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

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

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

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


   11.2 上拉触底事件


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


   11.3 节流


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

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


十二、生命周期

   12.1 应用生命周期写在app.js


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


   12.2 页面生命周期


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


   12.3 详细生命周期

 vue生命周期-小程序生命周期-react生命周期

十三、WXS脚本

   13.1 wxs和JavaScript的关系


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


   13.2 基础语法

     1.内嵌 wxs 脚本:通过模块名调用向外暴露的脚本方法


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


     2. 外联的 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>


   13.3 WXS 的特点


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


十四、自定义组件

   14.1 创建和引用

      根目录中 -> 创建components -> test 文件夹 -> 新建 Component -> 回车


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


  14.2 组件和页面的区别


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


  14.3 组件样式隔离

每个组件和页面样式之间不会影响,全局样式对组件无效,只有 class 选择器会有样式隔离效果


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

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


  14.4 属性


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

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


  14.5 数据监听器:observers


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}`  
  })
}


  14.6 纯数据字段

不用于页面渲染的data字段,用于业务逻辑,有助于提升页面更新的性能


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


  14.7 生命周期函数


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

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

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


  14.8 插槽

      1. 单个插槽


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

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


      2. 多个插槽


启用 多个插槽
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>


  14.9 组件通讯

     1. 属性绑定:只能传递数据,不能传递方法


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


     2. 事件绑定:子组件向父组件传递任意数据


父组件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
})}


     3. 获取组件实例


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

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

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

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


十五、基础加强

   15.1 behaviors

用于实现组件间代码共享:类似于mixins
每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中


创建:创建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{}
   // 其他节点/生命周期函数...
})


   15.2 vant-weapp组件库

有赞前端团队开源的一套小程序 UI 组件库,官方文档地址 https://youzan.github.io/vant-weapp


安装、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;
}


   15.3 API Promise 化

     官方提供的异步 API 都是基于回调函数实现,容易造成回调地狱,可读性、维护性差.


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指向一个空对象


   15.4 MobX全局数据共享

     1. 使用 mobx-miniprogram创建 Store 实例对象
         配合 mobx-miniprogram-bindings把 Store 中的共享数据或方法
         绑定到组件或页面中,实现全局数据共享。


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)
  },


15.5 分包

     1. 解释:把一个完整的小程序项目,按需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载;可以首次启动时间,共同开发时可以更好的解耦协作。
     2. 体积限制:整个小程序的主包+分包不超过16M,单个包不超过2M;
     3. 引用原则:主包、普通分包、独立分包之间私有资源不能相互引用;

 1. 分包的使用:


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

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


2. 独立分包:

不打开主包而进入分包也可以启动小程序。本质也是分包,独立于主包和其他分包单独运行


"independent": true


3. 分包预下载


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