用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序开发总结

Rolan 2017-12-18 00:38

微信小程序出来也有一段时间了,之前也陆续做过demo练练手,毕竟自己的demo还是比较简单的,如今参与公司的项目也是一路踩坑而来。认识小程序语言及开发工具首先,小程序类Web,但不同于我所认识的HTML,他有属于自 ...

微信小程序出来也有一段时间了,之前也陆续做过demo练练手,毕竟自己的demo还是比较简单的,如今参与公司的项目也是一路踩坑而来。

认识小程序

语言及开发工具

首先,小程序类Web,但不同于我所认识的HTML,他有属于自己的开发语言及工具:

  • JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中,不能操作 Browser context 下的 DOM,也不能通过 Node.js 相关接口访问操作系统 API。
  • WXML: 作为微信小程序的展示层,并不是使用 Html,而是自己发明的基于 XML 语法。
  • WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。”
  • 小程序开发工具,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

入口文件

小程序主要包含以下三个入口文件:

  • app.js 这个文件是整个小程序的入口文件,我们主要做了网络检测、用户信息获取等;当让也可以注入公用的方法在其他页面中去通过 getApp() 调用(注:页面中调用app.js中的方法时不需要通过 require 或者 import 引入)
  • app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径、整体窗口表现、设置网络超时时间、设置多tab等.
  • app.wxss 是小程序的公共样式表

项目开发

本次项目只负责了首页、授权和一些公共模块的开发,接下来就着重从这些模块展开。

生命周期

当然,微信小程序和其他前端框架类似也是有生命周期的:

Page({
/**
* 页面的初始数据
*/
data: {},

/**
* 生命周期函数--监听页面加载(像首页数据请求可以放在这里)
*/
onLoad: function (options) {},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},

/**
* 页面相关事件处理函数--监听用户下拉动作(这里添加了下拉刷新的功能)
*/
onPullDownRefresh: function () {},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})

当我们在 data 中初始化的值需要修改时,可在各生命周期及方法中通过 setData() 修改。由于小程序的入口页面就是首页,在首页添加了用户登陆和网络状态的检测在 onLoad 中。

tabBar

tabBar即小程序的底部导航栏,由于微信的限制,最少2个最多5个导航栏,只可设置文案、图标。

样式

小程序样式采用WXSS语言(具有CSS大部分特性)。他也提供了一种新的单位rpx(可根据屏幕宽度自行适应)。官方规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素,既然这样我们也推荐了我们设计师采用iPhone6作为设计标准,即750px宽度。

但是在实际的开发过程中如果字体大小也使用rpx做单位的话,在iPhone6 Puls上显示文字过大,影响美观。后经过测试采用了px做单位,即原设计稿尺寸的一半+px,这样可以保证文字大小在各设备中保持一致。

网络状态

在官方文档上有明确规定,本地资源是无法通过CSS获取的,图片的话只能使用网络资源或base64方式。首页有个需要判断网络状态的需求,由于断网情况下无法获取网络资源,最后就使用了base64的方式。

官方获取网络状态的API是 getNetworkType 为异步接口,通过它的返回结果再进行下一步(是显示无网络还是调用数据列表接口),说到这里大家都知该怎么办了—— Promise ,具体封装如下

new Promise((resolve, reject) => {
  let req = wx.getNetworkType({
    success: function (res) {
      var networkType = res.networkType;
      if (networkType === 'none') {
        resolve(false)
      } else {
        resolve(true)
      }
    },
    fail() {
      reject(false)
    }
  });
})

调试

调试的时候最大的问题呢是:无论是开发者工具上还是手机上,记得先把缓存删干净再测。特别是开发者工具每次切换host都要清理缓存,再重新打开,而且出现bug的时候尽量多测几次,进行反复确定。不然的话,你可能会发现,本来测好的功能又出现问题了,或者是本来有问题的部分又没有问题了。

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 掘金 来自: 掘金

相关阅读