微信小程序

最新推荐文章于 2024-07-25 17:50:20 发布

T_Donna

最新推荐文章于 2024-07-25 17:50:20 发布

阅读量1.7k

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_43750611/article/details/121053717

版权

微信小程序

1. 注册微信公众平台，下载微信开发者工具

1.1 注册账号、下载工具、创建小程序

https://mp.weixin.qq.com/

需要记录 AppID

创建第一个小程序

1.2 发布小程序

小程序开发者工具点击“上传” - 提交到服务器上的开发版本- 在服务器后台点击 “提交审核” - 审核版本-审核需要一周左右的时间

需要支付，需要预留2周时间部署，

1.3 成员管理

需要设置项目成员，可以完成多人开发一个小程序

1.4 配置客服人员

1.5 开发-开发管理-开发设置

a. 记录一下 AppID

自己保存一下 AppSecret（小程序秘钥）

每一次只能重新生成

b. 可以设置 ip白名单，

c. 可以设置上传的加密的秘钥

d. 重要：需要设置服务器域名

request合法域名 *** 获取数据的合法域名

socket合法域名 *

uploadFile合法域名 *

downloadFile合法域名 *

注意：只能设置 https 或 wss域名，需要有 ssl加密层

1.6 设置 - 第三方设置 - 插件管理

所有的第三方插件可以在这里安装

2.创建的项目的目录结构

pages 页面

index 首页页面有4个文件

logs 日志页面

utils 公共的js 文件时间戳转日期时间，封装获取数据

app.js 小程序的主入口文件

app.json 小程序的主文件的配置文件

app.wxss 主文件的样式

project.config.json 项目的配置文件

sitemap.json 站点配置文件

3. 新建一个页面，需要生成 4个文件 ***

wxml 相当于 html

wxss 相当于 css

json 配置

在 app.json 中会自动默认生成该页的路由

如：

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

4.小程序标签 *

view - div

text - span

image - img

block - template 不会解析成任何标签，一般用于 if for

5. 配置底部导航 ***

App.json

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/about/about"
  ],
  "tabBar":{
    "color":"#666",
    "selectedColor": "#445356",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"images/n-1-a.png",
        "selectedIconPath": "images/n-1.png"
      },
      {
        "pagePath":"pages/logs/logs",
        "text":"日志",
        "iconPath":"images/n-2-a.png",
        "selectedIconPath": "images/n-2.png"
      },
      {
        "pagePath":"pages/about/about",
        "text":"关于",
        "iconPath":"images/n-4-a.png",
        "selectedIconPath": "images/n-4.png"
      }
    ]
  },

注意：底部导航只能有 2-5项，否则会报错

小图标只能使用本地图片

6. 页面配置

6.1 全局页面配置

pages：路由

tabBar：底部导航

window：窗口

backgroundTextStyle 当需要下拉刷新时，需要配置为 dark

navigationBarTitleText 小程序的名称

"networkTimeout": {
    "request": 10000,  获取数据的过期时间
    "downloadFile": 10000  下载文件的过期时间
  },
  "debug": true   要不要显示提示信息

6.2 某个页的页面配置

 "navigationBarTitleText"  页面标题
"usingComponents"  配置使用的组件的名称和地址
"enablePullDownRefresh" true 开启下拉刷新

7.小程序与普通网页开发的区别 ***

1.网页开发渲染线程和脚本线程是互斥的；小程序中，二者是分开的，分别运行在不同的线程中， DOM API、JSCore

2.小程序没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API

3.执行环境不同，网页在浏览器运行；小程序在小程序的服务器运行

4.标签不一样，小程序 view text image block…

5.获取的系统权限不一样，小程序可以获取手机通讯录、摄像头、照片…

6.开发成本不同 ,小程序开发成本更低

8 .小程序和原生App 的区别

1.app 需要下载安装，占用手机内存；小程序不需要安装、用完即走

2.推广渠道不一样，小程序依托的微信的基础用户

3.小程序开发成本低，app开发成本很高

4.app速度比小程快、app可以调用更多的手机底层api

9.小程序的原理是什么？小程序是如何工作的

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

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

10. wxml 语法

10.1 变量

在 wxml 中需要使用 {{}}来渲染

更改 data中的数据需要使用

this.setData({data中的数据名:要赋值的新值})

微信小程序是单向数据流，直接赋值不会触发页面更新渲染

和react一样

10.2 列表渲染 for

a.基础for

 <view class="item" wx:for="{{listArr}}">
    <view class="item_con">日志内容：{{item.content}}</view>
    <view class="item_time">日志时间：{{item.time}}</view>
  </view>

b.wx:for 循环中可以使用 key

可以使用数据中的 id号

<view class="item" wx:for="{{listArr}}" wx:key="id">
    <view class="item_con">日志内容：{{item.content}}</view>
    <view class="item_time">日志时间：{{item.time}}</view>
  </view>

可以使用下标

<view class="item" wx:for="{{listArr}}" wx:key="index">
    <view class="item_con">日志内容：{{item.content}}</view>
    <view class="item_time">日志时间：{{item.time}}</view>
  </view>

还可以使用 *this

<view class="item" wx:for="{{listArr}}" wx:key="*this">
    <view class="item_con">日志内容：{{item.content}}</view>
    <view class="item_time">日志时间：{{item.time}}</view>
  </view>

注意：

循环的时候，默认 item代表一行，index 代表这一行的下标

循环时需要使用 key ，否则会报错，key作用唯一标识一行，提高性能

c.嵌套循环

wx:for-item 为item起别名
wx:for-index 为index起别名

d.使用循环时，可以在 block中写循环，block不需要解析为任何标签，减少标签层级

10.3 判断条件

  <view wx:if="{{num < 20}}">数据小于20</view>
  <view wx:elif="{{num >20}}">数据大于20</view>
  <view wx:else>数据等于20</view>

注意：也可以使用在 block标签中

11 wxss 的特点

11.1 wxss 有rpx的单位，可以适应所有的手机屏幕

ui作图需要使用 iphone678 ，

作图如果是2倍图，宽度 750px，

ui图和 rpx的比例是1:1 的比例，

在小程序上建议使用 rpx

11.2 app.wxss 全局样式，

页面名称.wxss 样式只在本业页起作用

11.3 @import “样式文件名.wxss ” 引入样式

11.4 内联样式的写法：

style="color:{{color}}"

12.获取数据

12.1 需要配置语序跨域的域名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-movvjQfj-1635585528828)(E:\2021-07-26\09-wechat\day01\note\images\配置.bmp)]

文档-api-网络-发起请求

wx.request

onLoad: function (options) {
    wx.request({
      url: 'https://www.51houniao.com/product/product/getProductRecommendUser',
      data:{
        desc: false,
        orderBy: "top",
        pageNow: 1,
        pageSize: 20,
        seller_user_id: "4bc4027c645343f09a964b5c2e9f875b"
      },
      method:"post",
      //请求成功
      success:(res)=>{
        console.log(res);
        this.setData({tuijianArr:res.data})
      }
    })
  },

13.钩子函数

在 onLoad 的钩子函数中获取数据

14. 模块的使用

输出：

//模块输出
module.exports = {
  request:pagedata.request
}

引入：

//引入封装好的request
const fetch = require("../../utils/http");

15. 小程序中request的封装都封装了哪些内容

基础的api路径
请求方式、请求路径、请求参数
加载中效果
使用 promise ，避免了回调地狱
输出使用 module.exports ，在页面中引入使用 require

16.小程序使用原来的旧项目需要注意

16.1 导入老项目，导入时可以使用测试号，需要在开发者工具-详情-本地设置-不校验合法域名画上对号

16.2 老项目，本地设置中的调试基础库需要降低版本，否则会报错

17. 事件 ***

17.1 普通的事件

wxml

<button bindtap="testFun">点击触发事件</button>

 //测试函数
  testFun:function(){
    console.log("函数运行了");
    this.setData({num:this.data.num+1})
  },

17.2 需要传递参数

wxml 传递参数 data-key=“value”

<button bindtap="testFun1" data-name="lili">点击触发事件并传参</button>

js 中使用 ev.currentTarget.dataset.** 接收参数

  testFun1:function(ev){
    console.log(ev.currentTarget.dataset.name);
  },

17.3 input框怎样接收wxml传过来的数据

wxml

<input type="text"  value="" bindinput="addFun"  />

js 中接收需要写成 ev.detail.value

  addFun:function(ev){
    console.log(ev);
    this.setData({heroname:ev.detail.value})
  },

17.4 事件绑定分为冒泡的事件绑定 bind*** ，阻止冒泡的事件绑定catch***

17.5 小程序事件

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

bindinput 表单输入时触发的事件

submit 提交事件

scroll 滚动事件

18 钩子函数 ***

18.1 页面钩子函数

onLoad 页面加载 ***

onReady 页面初次渲染完成 ***

onShow 显示***

onHide 隐藏***

onUnload 页面卸载***

onPullDownRefresh 下拉刷新的钩子函数 *

onReachBottom 上拉加载更多*

onShareAppMessage 分享时触发的钩子函数*

/**
   * 生命周期函数--监听页面加载 只能执行一次
   */
  onLoad: function (options) {
    console.log('onLoad');
  },
  /**
   * 生命周期函数--监听页面初次渲染完成 只能执行一次
   */
  onReady: function () {
    console.log('onReady');
  },

  /**
   * 生命周期函数--监听页面显示 执行多次
   */
  onShow: function () {
    console.log('onShow');
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onHide');
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('onUnload');
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },

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

  },

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

  }

App.js 中的钩子函数

属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调——监听小程序初始化。	***
onShow	function		否	生命周期回调——监听小程序启动或切前台。	
onHide	function		否	生命周期回调——监听小程序切后台。	
onError	function		否	错误监听函数。	  ***
onPageNotFound

19.页面路由跳转 ***

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 ``	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 使用组件 ``	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件`` 用户按左上角返回按钮	onUnload	onShow
Tab 切换	调用 API wx.switchTab 使用组件 `` 用户切换 Tab		各种情况请参考下表
重启动	调用 API wx.reLaunch 使用组件 ``	onUnload	onLoad, onShow

19.1 跳转 tabbar页面使用 ,注意：不能传递参数

跳转到的页面 show ，其他页面 hide

wx.switchTab

或

<navigator open-type="switchTab" url="/pages/index/index">跳转首页</navigator>

19.2 navigateTo 跳转

不能跳转 tabbar

跳转到的页面有返回按钮，页面实质显示和隐藏，不会卸载或重新加载

navigateTo的页面可以使用 navigateBack 返回

19.3 redirectTo 跳转

不能跳转 tabbar，跳转页面没有返回按钮，页面在跳转时会卸载，再回来时需要重新加载

19.4 reLaunch 跳转

可以跳转任何页面，还可以传参，性能比前面的几种稍差

20 页面间传参 ***

20.1 路由跳转时传参

A：传递参数

goAdd:function(){
    wx.navigateTo({
      url: '/pages/add/add?id='+this.data.userid,
    })
  },

B:接收参数使用 onLoad 里面的参数 options


  onLoad: function (options) {
    console.log(options.id);
  },

20.2 模块化传参

A：输出：

//模块输出
module.exports = {
  request:pagedata.request
}

B：引入：

//引入封装好的request
const fetch = require("../../utils/http");

20.3 使用 globalData 传递参数

在 App.js 中定义

 globalData: {
    userInfo: null,
    heroArr:[
      '葫芦娃','大黄蜂','托塔李天王'
    ]
  }

在其他页面使用

//引入 App.js
const app = getApp();

//使用 app中定义的全局变量
app.globalData.***

20.4 可以使用缓存 ***

A：设置缓存信息

//调用  同步设置缓存信息
    wx.setStorageSync('userSto', this.data.user)

B: 获取缓存信息

 wx.getStorageSync('userSto')

小程序的缓存和网页的缓存的区别： **

网页有 localStorage 和 sessionStorage；小程序只有 Storage
网页的缓存保存的数据是字符串，数据进去和出来时需要经过序列化和反序列化JSON.parse 和 JSON.stringify；小程序的缓存中可以直接存对象或数组

21. 小程序的模板使用

21.1 基础模板

创建模板文件

templates/listtuijian/listtuijian.wxml

<!-- 推荐数据的模板 -->
<template name="listtuijian">
<view>我是模板内容</view>
</template>

使用模板

<!-- 1.引入模板 -->
<import src="/templates/listtuijian/listtuijian.wxml" />
  <!-- 2.使用模板 -->
  <template is="listtuijian"></template>

21.2 模板传参

创建模板文件

templates/listitem/listitem.wxml

<!-- 推荐数据的模板 -->
<template name="listitem">
<view wx:for="{{tuijianArr}}" wx:key="index">
  {{item.proTitle}}
  </view>
</template>

使用模板

<import src="/templates/listtuijian/listitem.wxml" />
  <template is="listitem" data="{{tuijianArr}}"></template>

21.3 include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>


<!-- header.wxml -->
<view> header </view>

22. wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxs 是在 wxml的页面中使用 js内容

创建一个wxs

pages/list/listwxs.wxs

var msg = "hello wxs";
module.exports.msg = msg;

pages/list/list.wxml 里面使用

<!-- 引入 wxs -->
<wxs src="./listwxs.wxs" module="lw"/>
<view>{{lw.msg}}</view>

23.小程序中的简易双向绑定

小程序默认是单向数据流，支持的写法是

<input module:value="username" />

用于双向绑定的表达式有如下限制：

只能是一个单一字段的绑定，如

<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />

都是非法的；

目前，尚不能 data 路径，如

<input model:value="{{ a.b }}" />

这样的表达式目前暂不支持。

24 获取界面上的节点信息

const query = wx.createSelectorQuery();
    query.select('#myjiedian').boundingClientRect(function(res){
      console.log(res);//宽高、离上下左右的距离
    })
    query.exec();

25 动画的使用

wxml

<button bindtap="changeview">点击实现动画</button>
<view id="con" class="con">动画</view>

wxss

.con{width: 100px; height: 100px; border:2px solid blue;}

changeview:function(){
    this.animate("#con",[
      {opacity:1.0,rotate:0,backgroundColor:'#ff0000'},
      {opacity:0.5,rotate:45,backgroundColor:'#00ff00'}

    ],3000,function(){
      console.log("动画结束了");
    })
  },

26 .初始渲染缓存，

可以：

快速展示出页面中永远不会变的部分，如导航栏；
预先展示一个骨架页，提升用户体验；
展示自定义的加载提示；
提前展示广告，等等。

静态初始渲染缓存

若想启用初始渲染缓存，最简单的方法是在页面的 json 文件中添加配置项 "initialRenderingCache": "static" ：

{
  "initialRenderingCache": "static"
}

27.小程序的冷启动和热启动

这样，小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
啥时候冷启动：
1.小程序第一次使用
2.小程序在很长很长一段时间都么有使用过
3.连续提示内存不足，收到系统内存警告，小程序被主动销毁时
4.小程序在发布新版本

小程序销毁时机

通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁。具体而言包括以下几种情形：

当小程序进入后台，可以维持一小段时间的运行状态，如果这段时间内都未进入前台，小程序会被销毁。
当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
- 在 iOS 上，当微信客户端在一定时间间隔内连续收到系统内存告警时，会根据一定的策略，主动销毁小程序，并提示用户「运行内存不足，请重新打开该小程序」。具体策略会持续进行调整优化。
- 建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件，进行必要的内存清理。

28.组件 ***

28.1 基础自定义组件

a.创建组件

components/logcom/logcom.js

// components/logcom/logcom.js
Component({
  /**
   * 组件的属性列表,接收从父组件传过来的值
   */
  properties: {
  },

  /**
   * 组件的初始数据，组件自己的data数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

components/logcom/logcom.json

{
  "component": true,
  "usingComponents": {}
}

components/logcom/logcom.wxml

<text>我是一个新定义的子组件</text>

components/logcom/logcom.wxss

b.在 log页面使用新建好的组件

pages/log/log.json

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    "logcom":"/components/logcom/logcom"
  }
}

pages/log/log.wxml

<logcom></logcom>

注意：组件名称是驼峰式，在wxml中使用时需要转为中划线的写法

在自定义组件中可以使用其他的自定义组件

自定义组件和页面所在的项目根目录目录名不能以 wx- 为前缀，否则会报错

28.2 组件传参父传子 ***

新建组件

components/log/logtest.js

// components/logtest/logtest.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    username:{
      type:String
    },
    hero:{
      type:Array
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

components/log/logtest.json

{
  "component": true,
  "usingComponents": {}
}

components/log/logtest.wxml

<text>带参数的组件{{username}}</text>

<view>英雄列表</view>
<view wx:for="{{hero}}" wx:key="index">{{item}}</view>

在 log的页面中使用

pages/log/log.json

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    "logcom":"/components/logcom/logcom",
    "logtest":"/components/logtest/logtest"
  }
}

pages/log/log.wxml

<!-- 使用有参数组件 -->
<logtest username="{{username}}" hero="{{hero}}"></logtest>

28.3 小程序的组件的子传父

在子组件中

components/log/logcom.wxml

<button bindtap="changeNum">点击将子组件的数据传递给父组件</button>

components/log/logcom.js

// components/logcom/logcom.js
Component({
  /**
   * 组件的属性列表,接收从父组件传过来的值
   */
  properties: {

  },

  /**
   * 组件的初始数据，组件自己的data数据
   */
  data: {
    num:20
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeNum:function(){
      var myEventDetail = {num:this.data.num};//将要传给父组件的参数
      var myEventOption = {};//触发事件时的配置项
      //自动触发子组件的自定义事件
      this.triggerEvent("myevent",myEventDetail,myEventOption);
    }
  }
})

父组件中：

pages/logs/logs.wxml

<logcom bind:myevent = "parentFun"></logcom>

pages/logs/logs.js

 parentFun:function(data){
    console.log("父组件接收的值",data.detail.num);
  },

总结：子组件触发一个自定义的事件，在父组件中给这个自定义事件绑定一个函数，在函数中接收从父组件传过来的值。

28.4 组件中的插槽

父组件


<logcom bind:myevent = "parentFun">
  <text>天涯何处无芳草</text>
</logcom>

子组件

<slot></slot>

如果需要使用具名插槽，

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

28.5 自定义组件的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	`Object Error`	每当组件方法抛出错误时执行	2.4.1

28.6 behaviors 类似于vue 的 mixin ,或者是 react 高阶组件

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。

先定义behaviors的文件

module.exports = Behavior({
  data:{
    name:"hello mr"
  },
  methods:{
    beFun:function(){
      console.log("behavior 运行了");
    }
  },
  attached:function(){
    console.log("behavior 钩子运行了");
  }
})

使用时，先引入，再配置

...
//引入 behavior
+ const  myBehavior = require("./myBehavior.js");

//引入 App.js
const app = getApp();
Page({
 + behaviors: [myBehavior],
  data: {
    logs: [],
    userid:10,
    username:"lili",
    hero:["黄花菜","唯我独尊","中华神龙"]
  },
  ....

29. 使用插件

将插件在服务端查找和配置

后台 -设置-第三方服务 - 插件管理，添加插件，

引入插件

App.json

"plugins": {
    "DimensionalShow": {
      "version": "1.0.2",
      "provider": "wx0f253bdf656bfa08"
    }
  }

使用的页面配置插件组件
页面的 js和 wxml中粘贴相应的内容

30 小程序分包

包的大小不能超过2M，最多可以有10个分包，小程序的总大小不能超过20M

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

打包原则

声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包）中
app（主包）也可以有自己的 pages（即最外层的 pages 字段）
subpackage 的根目录不能是另外一个 subpackage 内的子目录
tabBar 页面必须在 app（主包）内

引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件；使用分包异步化时不受此条限制
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源
独立分包
分包预下载
分包异步化

31 小程序的登录流程

1.在小程序端，调用 wx.login 获取 code ***

2.使用 wx.request 调用你自己公司的服务器的登录接口，并且传递 code。 ***

3.在公司的后台会验证 APPID、秘钥、code、openid ，如果登录成功，调用公司后台的服务器数据库，表示登录成功了，给前台返回登录成功的数据。

4.前台需要将返回的登录成功的数据保存到缓存 ***

5.获取其他数据时，将登录的状态带过去就可以了

6.登录后，一般都会需要获取用户信息，使用小程序wx.getUserProfile 这个API 获取用户数据

7.如果电商网站，有可能需要你填写手机号码，自动触发后台接口，将你的微信id 和手机号码进行关联

8.第一次进入登录时，其实在后台是注册操作；其余的每一次都是登录操作

32 小程序的支付

32.1 申请小程序支付

调用前需在小程序微信公众平台 -功能-微信支付入口申请接入微信支付

32.2 关联商户号

商户号的id 秘钥用于加密的文件

32.3 服务端需要配置 签名生成、签名验证、敏感信息加/解密、媒体文件上传等基础功能，验证商户号是否能够正常支付

32.4 支付流程：

a.确认一下登录状态，如果已经登录，保存登录信息

b.使用 wx.request 调用后台接口，将token 、openid 传给后台

c.在服务端配置 **签名生成、签名验证、敏感信息加/解密，生成时间戳、随机串、签名信息。返回给小程序端。

d.客户端调用后台接口，生成订单，订单号、总价、商品信息。

e.调用 wx.requestPayment().拉起微信支付，支付成功，返回成功的信息，页面跳转到代发货页；支付失败，返回失败的提示。页面跳转到未支付订单页面。

注意：支付失败的原因：有可能，签名出错、支付时确认订单失败，支付的参数异常、支付超时。。。

33.小程序的优化 ***

33.1 减少首屏渲染时间

分页处理，触底加载下一页

页面缓存

初始渲染缓存

减少使用图片，

33.2 减少包的大小

使用组件、使用模板、将公共的内容封装、模块化、使用 behavior

使用网络图片，减少使用本地图

上传前将注释和没有必要的代码清除

33.3 减少使用 data 和 setData

33.4 给小程序进行分包加载，还可以使用分包预加载、独立分包

33.5 使用为骨架屏，当网速比较慢时，先显示出框架

33.6 可以考虑使用防抖节流比如：文本框和滚动事件

34 webview中的页面怎么跳回小程序中？

首先，需要在你的html页面中引用一个js文件。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

然后为你的按钮标签注册一个点击事件：
$(".kaiqi").click(function(){
wx.miniProgram.redirectTo({url: ‘/pages/indexTwo/indexTwo’})
});

这里的redirectTo跟小程序中的wx.redirectTo()跳转页面是一样的，会关闭当前页跳转到页面。

你也可以替换成navigateTo，跳转页面不会关闭当前页。

小程序跳转到 h5页面

h5的域名需要在小程序后台配置允许

必须是认证过的用户才可以使用

 <web-view src="https://域名"></web-view>

3.小程序跳转到另一个小程序

wx.navigateBackMiniProgram({
appId:'',
path: '/pages/index/index',
envVersion: 'trial',
extraData: {
openId: '123'    //需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
},

35 使用webview直接加载要注意哪些事项？

答: 一、必须要在小程序后台使用管理员添加业务域名；

二、h5页面跳转至小程序的脚本必须是1.3.1以上；

三、微信分享只可以都是小程序的主名称了，如果要自定义分享的内容，需小程序版本在1.7.1以上；

四、h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的。

36 请谈谈原生开发小程序、wepy、mpvue 的对比？

个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。
而如果有老的 h5 项目是 vue 开发或者也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以美团的mpvue 也不维护了。
而如果如果团队前端强大，自己做一套框架也没问题。

推荐使用 uni-app

原生