小程序开发

小程序

原文

小程序文档

我会加入一些 小程序文档没有提到的问题和开发的技巧。只讲到原生开发。

对于小程序原生的目录结构，相信大家都是了解的。不过还是把图放出来。

project.config.json

这个文件的目的就是保存编辑器的配置，不会因为更换电脑而配置丢失。编辑器识别的编辑器配置文件

appjs

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

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

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

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

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

    }
    ...
})

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

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

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

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进行跳转，避免页面卡死。

参考：小程序组件问题

关于Component 和 template 待续中。。。

小程序 template 使用