• 我们中的有些人,注定要在日常生活的点滴中去寻找生命的意义。---- 《生活大爆炸》|

小程序开发问题

小程序 admin 来源:小程序开发 4年前 (2019-04-01) 443次浏览 已收录 0个评论

appjs

appjs 是全局的,是唯一的,在非 appjs 页面,可以通过 getApp() 获取到 appjs 的方法。对于一些全局的变量或者方法可以写在 appjs 中便于调用。

APP({
    // 监听初始化
    onLaunch() {

    },
    // 监听页面显示
    onShow() {

    }
    // 监听页面隐藏
    onHide() {

    },
    /* 定义的方法 */
    SplitStr(){

    }
    ...
})

onLaunch、onShow、onHide 等方法是在小程序启动时就会调用,具体功能课参考文档,合理的定义全局方法有利于后期的代码编写。

在开发中可以封装全局方法,弹窗、request 请求方法等,将这些方法放在 appjs 中,可以更好的调用。

gloabl 可以保存全局变量,通过 getApp().globalData 就可以获得。

公共目录 utils

在平时的开发中,也可以将公共的文件和方法放在 utiles 目录下面。小程序目前支持 Es6/7 的大部分特性,对于前端开发这来说是比较友好的。

//支持 let 和 const
let a = 1;
const b = 2;

// 支持 class 类
class Fun{
constructor(){
this.show = this.show.bind(this)
}

show(){

}

}

// 解构赋值
let obj = {a: 1, b: 2};
const { a, b } = obj

// …扩展符
const arr = [12, 34, 45];
const newsrr = [ 234234, …arr ];

// 当然不只这么些新特性,,,等
当然支持的特性不只有这些,在实际的开发中可以不断的尝试,或者看小程序 API 文档。这个新的特性对于方法的抽离是很有帮助的,便于我们编写方法和导入方法。

尽量多的抽离方法,对于长期的项目维护是有必要的。

page

注册一个页面时,需要合理的配置页面的方法和组件。对于一些公用的组件 可以 抽离成 Component 组件 或者 template 模版

生命周期和事件处理函数 在 Page 页面 是最常用的。注意需要区分各个生命周期函数的作用。

Page({
    // 监听初始化
    onLaunch() {

    },
    // 监听页面初次渲染完成
    onReady() {

    },
    // 监听页面显示
    onShow() {

    }
    // 监听页面隐藏
    onHide() {

    },
    /* 定义的方法 */
    SplitStr(){

    }
    ...
})

// Page 的生命周期 和 App 的生命周期最大的区别就是:
// App 生命周期是小程序初始时才运行,而 Page 生命周期是进入页面路由时才运行。
// 上面说到的,App 生命周期是唯一的,Page 生命周期是每个页面都存在 Page 生命周期
  • page 中最重要可能是 setData 。这里需要记住,频繁的调用 setData 会出现性能问题,对于页面的卡顿和渲染过慢的问题,都有可能是频繁调用 setData 导致。

  • page 中的 onPageScroll ,频繁的操作 setData,即会导致页面卡顿。好的做法是,限定一个区间值,在区间值之内,就会改变,反之不调用。

  • page 的主包大小只有 2M,最好使用组件化开发。即使使用分包加载,也需要注意这个问题。

公共目录 utils

在平时的开发中,也可以将公共的文件和方法放在 utiles 目录下面。小程序目前支持 Es6/7 的大部分特性,对于前端开发这来说是比较友好的。

//支持 let 和 const
let a = 1;
const b = 2;

// 支持 class 类
class Fun{
    constructor(){
        this.show = this.show.bind(this)
    }

    show(){

    }
}

// 解构赋值
let obj = {a: 1, b: 2};
const { a, b } = obj

// ...扩展符
const arr = [12, 34, 45];
const newsrr = [ 234234, ...arr ];

// 当然不只这么些新特性,,,等

当然支持的特性不只有这些,在实际的开发中可以不断的尝试,或者看小程序 API 文档。这个新的特性对于方法的抽离是很有帮助的,便于我们编写方法和导入方法。

尽量多的抽离方法,对于长期的项目维护是有必要的。

开发需要注意的点

  • storage 一个 key 最大存 1M 的数据
  • 在开发中,建议使用组件形式开发
  • 抽离公共的方法,将放在放在 app 或者 公共方法里面
  • 页面的层级目前最多 10 层,getCurrentPages()方法可以获取页面栈,建议使用 getCurrentPages() 监测到页面层级多余 7 层时,使用 wx.redirectTo 进行跳转,避免页面卡死。

https://github.com/AttemptWeb/Record/tree/master/other/wxsapp


本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:小程序开发问题
喜欢 (0)

您必须 登录 才能发表评论!