
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"]        // 下载哪些分包
  }
},

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/509366

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

一、安装依赖包