微信小程序开发笔记

女德班吊车尾

已于 2022-04-30 12:15:51 修改

阅读量1.3k

点赞数 1

文章标签： vue.js 小程序微信小程序

于 2022-04-19 00:31:45 首次发布

本文链接：https://blog.csdn.net/qq_51384850/article/details/124263292

版权

项目结构

项目基本组成结构

pages：用来存放所有小程序的页面
utils：用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js：小程序项目的入口文件
app.json：小程序项目的全局配置文件
app.wsxx：小程序项目的全局样式文件
project.config.json：项目的配置文件
sitemap.json：用来配置小程序及其页面是否允许被微信索引

每个页面由4个基本文件组成：.js文件 .json文件 .wxml文件 .wxss文件

JSON配置文件

JSON是一种数据格式，在实际开发中，JSON总以配置文件的形式出现

小程序项目中由4种json配置文件：

项目根目录中的app.json配置文件：包括了小程序的

pages所有页面路径，
window所有页面背景色、文字颜色，
style组件使用的样式版本，
sitemapLocation指明sitemap.json位置
tabBar设置小程序底部的tabBar效果

项目根目录中的project.config.json配置文件：

setting中保存了编译相关的配置
projectname中保存了项目名称，项目名称不等于小程序的名称
appid中保存的是小程序的账号ID

项目根目录中的sitemap.json配置文件：
每个页面文件夹中的 .json配置文件：
可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项

关闭终端黄色警告：project.config.json文件中的setting,更改"checkSiteMap": true为false

认识页面

新建小程序页面

只需要在app.json中->pages中新增页面的存放路径，小程序开发者工具会自动创建对应的页面文件

修改项目首页

默认排在第一位的路径为项目首页

WXML

WXML和HTML的区别

标签名称不同

HTML(div, span, img, a)
WXML(view, text, image, navigator)

属性节点不同

<a href="#"></a>
<navigator url="pages/home/home"></navigator>

提供了类似于Vue中的模块语法

数据绑定
列表渲染
条件渲染

WXSS

WXSS和CSS的区别

新增了rpx尺寸单位

CSS需要手动进行像素单位换算，例如rem
WXSS在底层支持新的尺寸单位rpx，在不同大小屏幕小程序会自动进行换算

提供了全局的样式和局部样式

全局：项目根目录中的app.wxss
局部：当前页面的.wxss

WXSS仅支持部分CSS选择器

JS逻辑交互

小程序中的JS文件分为三大类，分别是:

app.js

是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

页面的.js 文件

是页面的入口文件，通过调用Page()函数来创建并运行页面

普通的.js 文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用

小程序宿主环境

宿主环境就是依赖环境，简单来说小程序的宿主环境就是手机微信

主要包含四个内容：通信模型，运行机制， 组件， API

通信模型

通信的主体：渲染层和逻辑层

小程序中的通信模型分为两部分:

渲染层和逻辑层之间的通信

由微信客户端进行转发

逻辑层和第三方服务器之间的通信

由微信客户端进行转发

运行机制

组件

官方把小程序的组件分为9大类，常用四大类：

视图容器

view
scroll-view
- scroll-y 或 scroll-x属性：规定在哪个方向滚动
- 要给swiper容器设置指定的高度或宽度才可以实现滚动
swiper和swiper-item
- indicator-dots属性：显示面板指示点
- autoplay属性：自动切换
- interval属性：设置切换间隔，单位为毫秒
- circular属性：衔接滑动，最后一张轮播图时跳回第一张

基础内容

text
- selectable属性：实现长按选中文本内容
rich-text
- nodes属性：把HTML字符串渲染为对应的UI结构，如<rich-text nodes="<h1 style='color:red;'>标题</h1>"</rich-text>

表单组件
导航组件

navigator
- 页面导航组件，类似于a链接

其它常用组件：

button
- open-type属性：可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
- type属性：指定按钮颜色类型
  - primary：主色调按钮，绿色
  - warn：警告按钮，红色
- size属性：
  - mini：小尺寸按钮
- plain属性：镂空按钮
image
- 默认宽度300px，高度240px
- mode属性：指定图片的裁剪和缩放模式
  - scaleToFill：默认值，缩放模式，不保持纵横比缩放图片，使完全填满image元素
  - aspectFit：保持纵横比缩放，将图片完整显示出来
  - aspectFill：保持纵横比缩放，使完全填满image元素，但是可能发生裁剪
  - widthFix：宽度不变，高度自动变化，保持宽高比不变
  - heightFix：高度不变，宽度自动变化，保持宽高比不变

API

小程序官方把API分成三大类

事件监听API

特点：以on开头，用来监听某些事件的触发
举栗：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

同步API

特点：以Sync结尾的API都是同步API，其执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常
举栗：wx.setStorageSync('key','value')向本地存储中写入内容

异步API

特点：类似于jQuery中的$.ajax(optjions)函数，需要通过success、fail、complete接受调用的结果
举栗：wx.request()发起网络数据请求，通过success回调函数接收数据

Day2

数据绑定

Mustache{{}}语法：

绑定内容
绑定属性
运算（三元运算、算术运算等）

举个栗子：

  info: 'Hello World',
  imgSrc:"https://www.itheima.com/images/logo.png",
  randomNum:Math.random()*10,
  randomNum1:Math.random().toFixed(2)

  <view>{{info}}</view>
  <image src="{{imgSrc}}" mode="widthFix"></image>
  <view>{{randomNum>=5 ? '数字大于或等于5':'数字小于5'}}</view>
  <view>{{randomNum1*100}}</view>

事件绑定

事件常用类型

tap
- bindtap或bind:tap
- 手指触摸后马上离开，类似于HTML中的click事件
input
- bindinput或bind:input
- 文本框的输入事件
- bindinput可以通过事件获取文本框最新值e.detail.value
change
- bindchange或bind:change
- 状态改变时触发

事件对象的属性

当事件回调触发的时候，会收到一个事件对象event，其主要属性如下：

type
- 事件类型
target
- 触发事件的组件的一些属性值的集合
detail
- 额外的信息
touches
- 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches
- 触摸事件，当前变化的触摸点信息的数组

target和currentTarget的区别

举个栗子：

<view bindtap="outerHandler">
  <button type="primary">按钮</button>
</view>

e.target指向的是触发事件的源头组件，即内部的按钮组件
e.currentTarget指向的当前正在发生触发事件的组件，即当前的view组件

data数据赋值

通过调用this.setData(dataObject)方法可以给页面data中的数据重新赋值

setCount(){
    this.setData({
      count:this.data.count+1
    })
  }

事件传参

可以为组件提供 data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下:

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

最终info会被解析成参数的名字，数值2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下:

btnHandler(event) {
      console.log(event.target.dataset)
      console.log(event.target.dataset.info)
  }

条件渲染

wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加else判断:

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

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if 控制属性，而<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden

在小程序中，直接使用hidden="{{ condition }}"也能控制元素的显示与隐藏

wx:if与hidden的对比

运行方式不同
- wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
- hidden 以切换样式的方式display: none/block;，控制元素的显示与隐藏
使用建议
- 频繁切换时，建议使用hidden
- 控制条件复杂时，建议使用wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换

列表渲染

wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下:

<view wx:for="{{array}}">
  索引是: {{index}} 当前项是: {{item}}
</view>

默认情况下，当前循环项的索引用index表示;当前循环项用item表示。

手动指定索引和当前项的变量名*：

使用wx:for-index可以指定当前循环项的索引的变量名
使用wx:for-item可以指定当前项的变量名

每次使用wx:for建议都要使用wx:key以防警告

wx:key的使用类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key值,从而提高渲染的效率,不用加mustache语法。

样式导入

@import "url";

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置app.json

window

属性名
- 类型
- 默认值
- 说明

导航栏部分属性：

navigationBarTitleText
- string
- 字符串
- 导航栏标题文字内容
navigationBarBackgroundColor
- HexColor
- #000000
- 导航栏背景颜色，如#000000
navigationBarTextStyle
- string
- white
- 导航栏标题颜色，仅支持black / white

下拉背景部分属性：

backgroundColor
- HexColor
- #ffffff
- 窗口的背景色
backgroundTextStyle
- String
- dark
- 下拉loading的样式，仅支持dark / light

window的其他属性：

enablePullDownRefresh
- Boolean
- false
- 是否全局开启下拉刷新
onReachBottomDistance
- Number
- 50
- 页面上拉触底事件触发时距页面底部距离，单位为px
- 实际开发中一般不会过多改动

模拟器不能百分百还原手机使用效果

tabBar

tabBar由6部分组成

backgroundColor: tabBar的背景色selectedlconPath:选中时的图片路径
borderStyle: tabBar上边框的颜色
iconPath:未选中时的图片路径
selectedColor: tab 上的文字选中时的颜色
color: tab上文字的默认（未选中）颜色

– tabBar节点的配置项：

list:tab页签的列表，最少2个，最多5个（必填）

position:tabBar的位置，仅支持bottom/top,默认为bottom

– 每个tab项的配置选项：

pagePath:页面路径，页面必须在pages中预先定义(必填)

text：tab 上显示的文字(必填)

iconPath: 未选中时的图标路径;当postion为top时，不显示icon

selectedlconPath: 选中时的图标路径;当postion为top时，不显示icon

举个栗子：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "index"
      },
      {
        "pagePath": "pages/test/test",
        "text": "test"
      }
    ]
  },

tabBar页面中必须有一path路径是项目的首页，否则不显示

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

网络数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:

只能请求HTTPS类型的接口
必须将接口的域名添加到信任列表中

注意事项:

域名只支持 https协议
域名不能使用IP地址或localhost
域名必须经过ICP备案
服务器域名一个月内最多可申请5次修改

发请GET请求

wx.request()方法,举栗：

wx.request({
    url: 'https://www.escook.cn/api/get',
    method:'GET',
    data:{
      name:'zhangsan',
      age:20
    },
    success:(res)=>{
      console.log(res);
    }
  })

跨域和AJAX说明

跨域问题只存在于浏览器啊的web开发中。

AJAX技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，而小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起AJAX请求”，而是叫做发起网络数据请求

Day3

页面导航

声明式导航

声明一个<navigator>导航组件，通过点击<navigator>组件实现页面条转

导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面。
在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性
- url表示要跳转的页面的地址，必须以/开头
- open-type表示跳转的方式，必须为switchTab

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面。
在使用组件跳转到普通的非tabBar页面时,需要指定url属性和open-type属性，其中:
- url表示要跳转的页面的地址，必须以Ⅰ开头
- open-type表示跳转的方式，必须为navigate

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

后退导航

如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性
- open-type的值必须是navigateBack，表示要进行后退导航
- delta的值必须是数字，表示要后退的层级,后退1位可以省略

<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>

编程式导航

调用小程序的导航API，实现页面的跳转

导航到tabBar页面

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。

其中Object参数对象的属性:url 需要跳转的tabBar页面的路径，路径后不能带参数

导航到tabBar页面

同理，换成非tabBar的页面路径

后退导航

调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。

其中Object 参数对象可选的属性:delta返回的页面数，如果delta大于现有页面数，则返回到首页

导航传参

在onLoad中接收导航参数
- 通过声明式导航传参或编程式导航传参所携带的参数，可以
  直接在onLoad事件中直接获取到
- 示例代码如下:

onLoad: function(options) {
//options就是导航传递过来的参数对象
    console.log(options)
    this.setData({
      query:options
    })
}

下拉刷新

"enablePullDownRefresh": true在页面设置下拉刷新
页面相关事件处理函数–监听用户下拉动作

  onPullDownRefresh: function () {}

wx.stopPullDownRefresh();停止下拉刷新，也是写在onPullDownRefresh函数中

上拉触底

页面上拉触底事件的处理函数

  onReachBottom: function () {}

需要设置节流

上拉触底距离

在page的json中设置"onReachBottomDistance": 150

添加loading提示效果

在请求完成前显示loading效果wx.showLoading({ title: '数据加载中...'})
在请求完成后隐藏

wx.request({
//省略其它代码...
complete: () =>{
  wx.hideLoading()
  }
})

节流处理

在data中定义isloading节流阀

false表示当前没有进行任何数据请求
true表示当前正在进行数据请求

在getColors()方法中修改isloading节流阀的值

在刚调用getColors时将节流阀设置true
在网络请求的complete回调函数中，将节流阀重置为false

在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制

如果节流阀的值为true，则阻止当前请求
如果节流阀的值为false，则发起数据请求

生命周期

应用生命周期
页面生命周期

生命周期函数

应用生命周期函数
在app.js声明

App({
  /** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/
  onLaunch: function () {},

  /** 当小程序启动，或从后台进入前台显示，会触发 onShow*/
  onShow: function (options) {},

  /** 当小程序从前台进入后台，会触发 onHide*/
  onHide: function () {},
})

页面生命周期函数

/** 生命周期函数--监听页面加载*/
Page({
  /** 生命周期函数--监听页面加载*/
  onLoad: function (options) { },

  /** 生命周期函数--监听页面初次渲染完成*/
  onReady: function () {},

  /** 生命周期函数--监听页面显示*/
  onShow: function () {},

  /** 生命周期函数--监听页面隐藏*/
  onHide: function () {},

  /** 生命周期函数--监听页面卸载*/
  onUnload: function () {}
})

wxs脚本

使用方法

内嵌wxs脚本
wxs 代码可以编写在wxml 文件中的<wXs>标签内，就像Javascript代码可以编写在 html文件中的<script>标签内一样。

wxml文件中的每个<wxS></wxS>标签，必须提供 module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员:

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

定义外联的wxs脚本

wxs 代码还可以编写在以.wxs为后缀名的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样。

// tools.wxs文件
function toLower(str) {
  return str.toLowerCase()
  }
module.exports = {
  toLower: toLower
  }

使用外联的wxs脚本

在wxml中引入外联的wxs脚本时，必须为<WXs>标签添加module和src属性，其中:
- module用来指定模块的名称
- src用来指定要引入的脚本的路径，且必须是相对路径

<!-- 调用m2模块中的方法-->
<view>{{m2.toLower(country)}</view>

<!--引用外联的tools.wxs脚本，并命名为m2 -->
<wxs src="..l ../utils/tools.wxs " module="m2"></wxs>

wxs的特点

不能作为组件的事件回调
- wxs 典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用，例如:

<view>{{m2.toLower(country)}}</view>

但是，在wxs中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的:

<button bindtap="m2.toLower">按钮</button>

隔离性
- 隔离性指的是 wxs的运行环境和其他JavaScript代码是隔离的。体现在如下两方面
  - wxs 不能调用js 中定义的函数
  - wxs 不能调用小程序提供的API
性能好
- 在iOS设备上，小程序内的WXS会比JavaScript 代码快2～20倍
- 在android设备上，二者的运行效率无差异

Day4

自定义组件

局部引用

在页面的.json配置文件中引用组件的方式，叫做局部引用,示例代码如下:

//在页面的.json文件中，引入组件
{
  "usingComponents": {
    "my-test": "/components/test/test"
  }
}

//在页面的.wxml 文件中，使用组件
 <my-test></my-test>

全局引用

在app.json引用组件，步骤与局部引用相同

组件与页面的区别

组件的.json文件中需要声明"component": true
属性组件的.js 文件中调用的是Component()函数；页面是Page()函数
组件的事件处理函数需要定义到methods节点中

组件样式

组件样式隔离的注意点

app.wxss中的全局样式对组件无效
只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
心
- 建议:在组件和引用组件的页面中建议使用class选择器
  不要使用id、属性、标签选择器!

修改组件的样式隔离选项
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项，用法如下:

//在组件的.js 文件中新增如下配置
Component({
  options: {
    stylelsolation: 'isolated'
    }
})

//或在组件的.json文件中新增如下配置 
{
"stylelsolation" : "isolated"
}

stylelsolation的可选值：

isolated 启用样式隔离
apply-shared 页面wxss样式将影响到自定义组件，但自定义组件wxss中的样式不会影响页面
shared 页面wxss样式将影响到自定义组件，自定义组件wxss中的样式也会影响页面和其它设置了apply-shared的自定义组件

组件属性

properties是组件的对外属性，用来接收外界传到组件中的数据

Component({
  properties: {
    max: {
//完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
      type: Number，//属性值的数据类型
      value: 10  //属性默认值
    }，
    max: Number
//简化定义属性的方式【不需指定属性默认值时，可以使用简化方式
  }
})

<my-test1 max="10"></my-test1>

由于data 数据和properties属性在本质上没有任何区别，因此 properties属性的值也可以用于页面渲染,或使用setData为properties 中的属性重新赋值

数据监听

基本语法：

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

监听对象中属性的变化，举个栗子：

 'rgb.r , rgb.g , rgb.b':function(newR,newG,newB){
      //'rgb.**' 通配符监听对象中所有属性的变化
      this.setData({
        fullColor:`${newR},${newG},${newB}`
      })
    }

纯数据字段

概念：纯数据字段指的是不用于界面渲染的data字段
使用规则：在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段

options:{
    pureDataPattern:/^_/
    //指定所有以`_`开头的数据字段为纯数据字段
  }

插槽

默认为单个插槽，一个自定义组件只能使用一个<slot>进行占位
多个插槽的启用需要在options节点中定义属性

options:{
  multipleSlots:true
}

多个插槽使用不同的name来区分
在使用带有多个插槽的自定义组件时，需要用slot属性来将节点插入到不同的<slot>中,如：<view slot="abc">这是name="abc"的内容</view>

生命周期

组件的生命周期

created
- 在组件实例刚刚被创建时执行
attached
- 在组件实例进入页面节点树时执行
ready
- 在组件在视图层布局完成后执行
moved
- 在组件实例被移动到节点树另一个位置时执行
detached
- 在组件实例被从页面节点树移除时执行,如退出一个页面时
error
- object Error
- 每当组件方法抛出错误时执行

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，也可以在lifetimes字段
内进行声明（这是推荐的方式，其优先级最高)。

lifetimes:{
    attached(){},
    detached(){}
  }

组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

在自定义组件中,组件所在页面的生命周期函数有如下3个，分别是:

show
- 组件所在的页面被展示时执行
hide
- 组件所在的页面被隐藏时执行
resize
- Object Size(参数)
- 组件所在的页面尺寸变化时执行

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中

pageLifetimes:{
    show:function () {}
  }

组件通信

父子组件之间通信的3种方式

属性绑定
- 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据 properties
事件绑定
- 用于子组件向父组件传递数据，可以传递任意数据
  - 在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
  - 在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
    - 使用bind:自定义事件名称
  - 在子组件的js 中，通过调用this.triggerEvent("自定义事件名称', { /*参数对象*/})，将数据发送到父组件
  - 在父组件的js 中，通过e.detail 获取到子组件传递过来的数据
获取组件实例
- 父组件还可以通过this.selectComponent()获取子组件实例对象这样就可以直接访问子组件的任意数据和方法
  - 调用时需要传入一个选择器，只能为id或class选择器

behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的“mixins"

创建behaviors

module.exports=Behavior({
  data:{
    username:'zs'
  },
  properties:{},
  methods:{}
})

导入并使用behaviors

//使用require()方法导入需要的behavior
const myBehavior = require('../../behaviors/my-behaviors')
Component({
  //将导入的behavior实例对象，挂载到behaviors数组节点中，即可生效
  behaviors:[myBehavior]
})

使用npm

vantweapp

轻量、可靠的小程序 UI 组件库

npm install @vant-weapp@1.3.3 -s --product
引用

"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }

声明一个自定义属性，属性名需要以两个减号(–）开始，属性值则可以是任何有效的CSS值。和其他属性一样，自定义属性也是写在规则集之内的

html{
  --main-color:red;
}

api的promise化

在小程序中，实现 APl Promise化主要依赖于miniprogram-api-promise这个第三方的npm包

npm install --save miniprogram-api-promise@1.0.4

每次下载完后都要在工具中重新构建npm

// app.js 在小程序入口文件中调用一次PromisifyAll()方法
import {PromisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p={}
promisifyAll(wx,wxp)

具体操作实例：

async getInfo() {
    const {data: res} = await wx.p.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'zhangsan',
        age: 20
      },
    })
    console.log(res);
  },

全局数据共享

全局数据共享方案

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings 实现全局数据共享。其中:

mobx-miniprogram 用来创建Store 实例对象
mobx-miniprogram-bindings用来把Store 中的共享数据或方法，绑定到组件或页面中使用

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

创建store实例对象

//store.js文件
import {observable,action} from 'mobx-miniprogram'
export const store = observable({
  numA:1,
  numB:2,
  //计算属性 以get开头，只能获取不能修改数据
  get sum(){
    return this.numA+this.numB
  },
  // action方法:用来修改store的数据
  updateNum1:action(function (step) {
    this.numA+=step
  }),
  updateNum2:action(function (step) {
    this.numB+=step
  }),
})

将store成员绑定到页面中

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNum1']
    })
  },
  onUnload: function () {
    this.storeBindings.destroyStoreBindings()
  }
})

将store成员绑定到组件中

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: 'numA'
    },
    actions: {
      updateNum2: 'updateNum2'
    }
  },
})

分包

在app.json的subpackages节点中声明分包的结构

"subPackages": [
    {
      "root": "pkgA",
      "name":"p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "pkgB",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ],

"name":"p1"取别名
"independent":true独立分包不能引用主包的公共资源
在app.json中使用preloadRule节点定义分包的预下载
```
"preloadRule": {
  "pages/contact/contact":{
    "packages": ["p1"],
    "network": "all"
  }
},
```
- 表示进入某个页面的时候会预下载某些分包
- network只有两个属性值 all表示无论什么网络都会进行分包预下载,wifi表示只有wifi情况下预下载，而4g或5g都不预下载
- 同一个分包中的页面享有共同的预下载大小限额为2M

自定义tabbar

tabBar里面配置"custom":true
创建文件夹custom-tab-bar
自定义组件的wxss时，要添加代码
```
options:{
 styleIsolation:'shared'
},
```

女德班吊车尾

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发笔记

项目结构项目基本组成结构pages：用来存放所有小程序的页面utils：用来存放工具性质的模块（例如：格式化时间的自定义模块）app.js：小程序项目的入口文件app.json：小程序项目的全局配置文件app.wsxx：小程序项目的全局样式文件project.config.json：项目的配置文件sitemap.json：用来配置小程序及其页面是否允许被微信索引每个页面由4个基本文件组成：.js文件 .json文件 .wxml文件 .wxss文件JSON配置文件JSON是一种数据格
复制链接

扫一扫