为了账号安全,请及时绑定邮箱和手机立即绑定

小程序开发

2018.07.14 21:48 4260浏览
小程序

原文

小程序文档

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

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

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 使用

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

3人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消