小程序

螺旋桨启动
848 阅读9分钟

0.小程序开发

1.业务模块

  • 规格选择模块：

    商品id ===> 有不同产品规格 ===不同产品id 后端返回一个颜色数组和尺寸数组 ，产品数组 颜色数组 id + 尺寸数组 id 5_5 ===> 去找产品数组对应id，再提交

  • 登录模块：

    调用wx.getUserProfile和wx.login方法返回用户加密的信息，然后提交给后台，后台在返回用户资料和token

  • 支付模块：

    调用wx.requestPayment这个api

2.注意事项(bug)

  • 封装request.js;里面封装axios，配置基准地址，请求拦截器，响应拦截器 发起请求会用getApp()方法解构出axios实例，再发请求 但是⭐独立分包(优惠活动页面)不能引入，会报错（独立分包不能加载主包资源）

  • 开发者，体验者权限。不校验域名以及https证书

    看包体积，后台布置接口到线上，把后台接口放入合法域名白名单中，项目地址换为线上地址再提交

  • tabbar有缓存，只会触发一次onload ===> onshow

    tabbar 进来放onshow；非tabbar放onload

<view hidden="true"></view> ====================<div></div>
<rich-text nodes="{{str}}"></rich-text> ========== v-html
<text></text>===================== <span></span>  
wx.getStroageSync

1.⭐⭐生命周期

1.应用生命周期app

1.onLaunch：当小程序初始化完成时，全局只触发一次
2.onShow：当小程序启动，或从后台进入前台显示 
3.onHide：当小程序从前台进入后台，会触发                                                                           4.onError：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {}

2.页面生命周期page

3.组件生命周期component

lifetimes: {
        created() {
          // 在组件实例刚刚被创建时执行⭐
        },
        attached() {
          // ⭐⭐在组件实例进入页面节点树后⭐⭐
        },
        ready() {
          // 在组件在视图层布局完成后执行
        },
        moved() {
          //    在组件实例被移动到节点树另一个位置时执行
        },
        detached() {
          // 在组件实例被从页面节点树移除时执行⭐
        },
        error(err) {
          // 每当组件方法抛出错误时执行
        }
      },
          
//组件所在页面生命周期；让组件可以捕捉页面变换
  pageLifetimes: {
    show() {
      // 页面被展示
    },
    hide() {
      // 页面被隐藏
    },
    resize(size) {
      // 页面尺寸变化(横屏)
    },
  },

2.基本语法

1.插值语法以及修改data

image-20211106194335045

2.wx:for循环

wx:for 必须要配合 wx:key

image-20211106205826988

3.post及get请求

image-20211107185206144发起post，get请求优化

image-20211107192215248

1.在pages同级目录下创建utils目录放入request.js文件

2.在app.js中引入request.js

3.login.js中用getApp()方法引入axios

4.发请求：

image-20211107192405111

4.关闭下拉刷新

image-20211107193613057

3.⭐⭐页面导航

1.声明式导航

⭐⭐【总结】小程序里面页面传参依靠的是URL上面的查询参数，但是不能给tabBar页面传递

1.导航到 tabBar 页面

<navigator url="/pages/home/home" open-type="switchTab">跳转到tabBar页面</navigator>
  • url 表示要跳转的 页面的地址，必须以 /开头
  • open-type 表示 跳转的方式 ，必须为 switchTab

2.导航到非 tabBar 页面

<navigator url="/pages/event/event" open-type="navigate">跳转到 非tabBar页面</navigator>
​
// ⭐传参⭐ //
<navigator url="/pages/event/event?id=10&tom=1" >跳转到非 tabBar页面</navigator>
  • url 表示要跳转的 页面的地址，必须以 /开头
  • open-type 表示 跳转的方式 ，必须为 navigate

3.后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，例如：

<navigator open-type="navigateBack">后退导航</navigator>
  • open-type 的值必须是 navigateBack，表示要进行后退导航
  • delta 的值必须是数字，表示要后退的层级
  • 后退导航不用配置url
  • 后退导航在tabBar页面是无效的

2.编程式导航

1.导航到 tabBar 页面

调用wx.switchTab({...})方法，可以跳转到 tabBar 页面，其中 Object 参数对象的属性列表如下：

属性类型是否必选说明
urlstring是需要跳转的 tabBar 页面的路径 ，路径后不能带参数。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
tabFn(){
    wx.switchTab({
        url:'/pages/home/home'
    })
}

2.导航到非tabBar 页面

调用wx.navigateTo({...})方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下

属性类型必填说明
urlstring是需要跳转的应用内非tabBar 的页面的路径, 路径后可以带参数
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
tabFn(){
    wx.navigateTo({
        url:'/pages/home/home'
         // ⭐传参⭐
        url:"/pages/event/event?id=10&tom=1"
    })
}

3.后退导航

调用wx.navigateBack({ ... }) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

属性类型默认值必填说明
deltanumber1否返回的页面数，如果delta 大于现有页面数，则返回到首页。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
tabFn(){
    wx.navigateBack({
        delta:1
    })
}

3.接收参数

image-20211107200524972

4.⭐⭐分包

分包指的是把一个 完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载

可以优化小程序首次启动的下载时间

TabBar必须在主包

相当于路由懒加载

分包的加载规则

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

每个包最多2mb，主包 + 所有分包最多20mb

1.引用原则

① 主包无法引用分包内的私有资源

② 分包之间不能相互引用私有资源

③ 分包可以引用主包内的公共资源

m'b

2.独立分包

  • 具有一定功能独立性的页面配置到独立分包中，不依赖主包，独立运行，提升分包页面的启动速度
  • 普通分包必须依赖于主包才能运行
  • 和普通分包对比, 独立分包就是在 subpackages 数组的某个元素中, 配置 independent 为true即可
  • 独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源
  • 临时加的广告也或活动页面
  • image-20211108122943236

3.分包预加载

在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

image-20211108122819280

同一个分包中的页面享有共同的预下载大小限额 2M；packages和上面的name对应

image-20211108192007894

5.wxs语法

  • 不能写es6，遵循commonJs规范

image-20211108202430651

6.组件

1.局部引用

image-20211108211533180

2.全局引用

image-20211108210803449

7.组件样式

自定义组件的样式只对当前组件有效，不会影响组件之外的UI结构

在组件和引用组件的页面中建议使用class选择器， 不要使用id、属性、标签选择器！

只有class选择器才有样式隔离效果

8.⭐⭐父子通信

1.方法数据

image-20211108224337081

2.父传子

无单向数据流，可以修改props

image-20211108230035157

3.子传父

image-20211108233349988

4.父子

image-20211108233536325

9.监听器

image-20211108230822365

10.插槽

1.单个插槽

image-20211108231256573

2.多个插槽(具名插槽)

image-20211108231641026

image-20211108231617544

11.behaviors(类似mixin)

【指南=>自定义组件=>behavior】

12.⭐⭐微信登录

image-20211109002349135

暗坑：必須同時有，超時都不行

image-20211109002337929

13.mobx

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

1.全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。

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

中：

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

2.安装Mobx

在项目中运行如下的命令，安装 MobX 相关的包：

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

注意： MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm 。

3.构建Mobx的Store实例

在项目根目录下新建store文件夹，并且新建 store.js 文件

// 按需导入第三方包的方法  observable action
import { observable,action } from 'mobx-miniprogram'
​
// 创建Store实例对象，并导出
export const store = observable({
  // 核心概念1：共享数据字段
  numA:1,
  numB:2,
  // 核心概念2：计算属性
  // 在计算属性的方法前，必须添加get修饰符，代码sum的值是只读的，无法进行修改
  // 计算属性sum  依赖numA和numB的值，因此sum函数返回值就是最终的值
  get sum(){
    return this.numA + this.numB
  },
  // 核心概念3：action方法
  // 定义actions方法，用来修改store中的数据
  updateNum1:action(function(step){
    this.numA += step
  }),
  updateNum2:action(function(step){
    this.numB += step
  })
})

4.使用Store的成员

1、页面中使用

  • 页面的js文件中
// 1. 首先 导入第三方包，将数据绑定到页面
import { createStoreBindings } from 'mobx-miniprogram-bindings'
// 2. 其次 在页面的js文件的头部导入仓库实例对象
import { store } from '../../store/store'
​
// 3. 绑定操作： 将仓库的东西绑定到页面中，在页面的js文件的Page方法中
Page({
  /**
   * 页面的初始数据
   */
  data: {
​
  },
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用createStoreBindings方法
    // 参数1: 绑定给谁： 当前页面this
    // 参数2：对象 { store：容器， fields:数据，  actions:方法 } 
    this.storeBindings = createStoreBindings(this,{
      // 映射容器的实例
      store,
      // 映射容器的数据字段
      fields:['numA','numB','sum'],
      // 映射容器修改的方法
      actions:['updateNum1']
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 使用this.storeBindings,得到绑定对象
    // 调用绑定对象的destroyStoreBindings 方法，进行清理销毁的工作
    this.storeBindings.destroyStoreBindings()
  },
  // 事件处理函数，触发action
  btnHandler1 (e) {
    console.log(e);
    // 使用仓库的中的方法，并传递数据
    this.updateNum1(100)
  }
})    
  • 页面的 wxml 文件中
<!-- 使用仓库中的数据 -->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1">numA+100</van-button>

2、组件中使用

  • 组件的.js文件中
// 1. 按需导入仓库实例
// 2. 在组件的behaviors节点 实现自动绑定
// 3. 在 storeBindings 节点指定要绑定的store和要绑定的数据及方法
​
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
​
Component({
  // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors:[storeBindingsBehavior],
  storeBindings:{
      store,    // 指定要绑定的store
      fields:{  // 指定要绑定的数据字段和计算属性
        numA: ()=>store.numA,    // 绑定字段方式1
        numB: store=>store.numB, // 绑定字段方式2
        sum:'sum'  // 绑定字段方式3
      },
      actions:{  // 指定要绑定的方法
        updateNum2:'updateNum2'
      }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    btnHandler2(e){
      // 直接使用this调用仓库中的方法
      this.updateNum2(20)
    }
  }
})
  • 组件的.wxml中
<!-- 组件的 .wxml 结构 -->
<view>{{ numA }} + {{ numB }} = {{ sum }} </view>
<van-button type="primary" bindtap="btnHandler2">numB+20</van-button>
avatar
文章
阅读
粉丝