小程序

作者: 南枫小谨 | 来源:发表于2021-06-28 15:01 被阅读0次

生命周期

应用周期

  • onLaunch 首次打开
  • onShow 初始化完成
  • onHide 切换

页面周期

  • onLoad 加载页面
  • onShow 前后台切换
  • onHide 前后台切换
  • onUnLoad 重定向 / 路由切换
  • onPullDownRefresh 下拉
  • onReachBottom 上拉
  • onShareAppMessage 分享

应用生命周期

  1. onLaunch 用户首次打开小程序 全局只触发一次
  2. onShow 小程序初始化完成以后触发、从后台进入前台触发
  3. onHide 小程序从前台进入后台触发

页面生命周期

  1. onLoad 加载页面
  2. onSHow 显示页面,从后台,或者重新进入本页面触发
  3. onReady 首次显示页面,一个页面只会触发一次
  4. onHide 后台运行或者跳转到其他页面触发
  5. onUnLoad 重定向 / 路由切换

双线程模型

小程序的渲染层和逻辑层分别由2个线程管理

  1. 在渲染层将wxml与wxss转化成js对象也就是虚拟DOM
  2. 在逻辑层将虚拟的DOM对象配合生成真实的DOM树,交给渲染层渲染
  3. 当数据变化时,逻辑层提供更新数据,js对象发生改变,用diff算法进行比较
    4 将更新的反馈到真实的DOM树中,更新页面

运行机制

  1. 热启动:假如⽤户已经打开过某⼩程序,然后在⼀定时间内再次打开该⼩程序,此时⽆需重新启动,只需将后台态的⼩程序切换到前台,这个过程就是热启动;
  2. 冷启动:⽤户⾸次打开或⼩程序被微信主动销毁后再次打开的情况,此时⼩程序需要重新加载启动,即冷启动。

遇到的坑

1. 自定义tabbar在页面存在下拉更新(scrollview)的时候,页面被下拉,tabbar也会跟着下拉。

2. require在小程序中不支持绝对路径,只能用相对路径去选取'../../../utils/tool.js'

  • 方案:
  App({
      require: function($uri) {
          return require($url);
      }
  })

comp.js

  const Api = app.require('utils/tool.js');

利用require返回uri带上/

3. 组件引用资源路径不能解析特殊字符或汉字

4. {{}}模板中不能执行特殊方法,只能处理简单的四则运算

  const money = 345678;
  <view>{{ money }}</view>
  • 利用wxs的format
    vue {{ money | moneyFilter }}
    wxs 实现format

.wxs

  const fnToFixed = function(num) {
      return num.toFixed(2);
  }
  module.exports = {
      fnToFixed
  }
  <wxs src='../../../xxx.wxs' module="filters">
  <view>{{ filters.fnToFixed(money) }}</view>

5.wxs无法使用new Date()

  • getDate()

6.setData过程中需要注意对象覆盖

  data: {
      a: '1',
      b: {
        c: 2,
        d: 3
      }
  }

  this.setData({
      b: {
        c: 4
      }
  });
  const { b } = this.data;
  b.c = 4;
  this.setData({ b });
  // wx-update-data

7. IOS的date不支持2020-06-26格式,必须要转成2020/06/26

8. wx接口promise化

  wx-promise-pro
  • 安装Promise wx-promise-pro
npm i -S wx-promise-pro
import { promisifyAll } from 'wx-promise-pro';
// before
wx.showLoading({
  success: res => {
      wx.request({
          // ……
      })
  }
})
// after
wx.pro.showLoading({
    title: 'loading',
    mask: true
}).then(() => {
    consol.log('I am in promise');
})
  • 自己手写封装一个promise化的接口
wx.request({
  url: '',
  data: (),
  success: res => {}
})
// 实现
wx.pro.request({
    url: '',
    data: ()
}).then(res => {}).catch(res => {})
  • 做法:
function request(opt) {
    return new Promise( (resolve, reject) => {
        wx.request({
            ...opt,
            success: res => {
                resolve(res);
            },
            fail: err => {
                reject(err);
            }
        })
    } )
}
function promisify(api) {
    return (opt = {}) => {
        return new Promise((resolve, reject) => {
            api({
                ...opt,
                success: resolve,
                fail: reject
            })
        })
    }
}
promisify(wx.request)(opt);

9. app入口

  • 可以通过getApp来获取全局的app()
    a. 如果在App()内部函数中,在调用APP之前用getApp,直接用this即可
    b. 获取getApp之后,可不可以拿到生命周期?可以,但是禁止操作

  • page()
    a. getCurrentPage()获取当前page,不要修改页面栈,不要在app.onLaunch时候调用,page还没生成
    b. wx.navigateTo(). 被打开的页面可以通过调用?this.getOpenEventChannel()来获取eventChannel对象
    打开方,也可以在回调中拿到这个对象

10. node属性名不要使用data开头

相关文章

  • 潍坊小程序开发

    潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍...

  • 潍坊商城小程序开发制作

    潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍...

  • 蔬菜生鲜小程序制作

    小程序 | 小程序制作 | 小程序入口 | 小程序注册 | 小程序直播 | 小程序电商 | 社交电商 | 社区团购...

  • 微信小程序开发平台招商加盟

    微信小程序开发 我们做:简单小程序 门店小程序,附近小程序 功能型,预约型小程序 企业模板小程序 点餐外卖小程序 ...

  • 小程序源码[小程序demo] 微信小程序古诗文助手源码

    小程序源码[小程序demo] 微信小程序古诗文助手源码 小程序源码[小程序demo] 微信小程序古诗文助手源码,可...

  • 多端微信小程序开发

    多端小程序开发涵盖微信小程序支付宝小程序百度小程序抖音小程序360小程序扣扣小程序现面向全国招代理!有意者可以与我...

  • 小程序之社交

    主要内容:小程序调用AppApp调用小程序App分享小程序小程序自身分享功能小程序与H5交互小程序之间互相跳转绘制...

  • 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序

    1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单先上链接小程序跳转小程序 Navigator组件 推荐使...

  • 小程序部署流程

    小程序部署流程: 一、 注册小程序(小程序接入指南) 二、创建小程序项目(简易教程·小程序) 三、部署开发环境(开...

  • 微信小程序源码案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序dem...

网友评论

      本文标题:小程序

      本文链接:https://www.haomeiwen.com/subject/vurqultx.html