小程序-从零开始

所在项目组没有前端,所有同事均为后端RD,最近机缘巧合协助其他部门开发一个小程序(七牛财富-快讯),需要独自前后端一起开发,开发完成项目后编写此wiki进行开发总结,本文仅起到从0到0.1简单介绍一下小程序框架的入门作用,若有疏漏错误之处万望指出。

  • 了解小程序

小程序一般指微信小程序,不过支付宝之前也推出了蚂蚁小程序,二者大同小异,框架结构基本一致,github上甚至有命令行一键转换工具,因此这里一起做介绍。

小程序分为app、page两层,【app】由app.js(小程序逻辑,一般放一些全局调用的逻辑,比如进入小程序获取设备信息、用户登陆信息等)、app.json(小程序公共配置,比如标题、颜色等,另外小程序包含页面也需要在这里声明,第一行路径的文件默认为首页)、app.wxss(蚂蚁为app.acss,小程序公共样式,非必需),用来描述整体程序。

【page】用来描述各个页面,由四个一组的文件组成,与传统web页面对应关系如下:


web

微信小程序

蚂蚁小程序

页面结构htmlwxmlaxml
页面样式csswxssacss
页面逻辑jsjsjs
页面配置-jsonjson

每个页面都由四个在同一路径下的同名文件组成,小程序框架会自动关联同一个路径下的同文件名结构、样式、逻辑和配置文件。下文将着重以微信小程序框架来进行介绍。

  • 前期准备

小程序核心是一个响应式数据绑定系统,逻辑上分为视图层和逻辑层,框架提供了自己的视图层描述语言,以及基于 JavaScript 的逻辑层,并在视图层与逻辑层间提供了数据传输和事件系统,二者数据同步。开发之前需要先下载平台开发的专用开发者工具。

蚂蚁开发者工具  微信开发者工具  


通过开发者工具可以完成代码编写、本地调试、真机预览,程序发布,微信开发工具还提供了自动化测试等功能。使用开发者工具前需要先注册申请APP_ID(也可暂时使用测试ID,上线前申请),如果是使用已有APP_ID进行开发,需要管理员将个人微信号添加开发者权限。之后创建项目,可选择是否建立模板,开发者工具会自动创建目录结构和两个简单的初始页面。

yangshaoyang.cn

  • 开始开发

视图层:

只要有过html/css/js开发经历,很快就能上手小程序开发,比如微信小程序负责页面结构的wxml文件,由各种类html标签构成,直观上最大的不同应该是小程序引入了<view></view>视图容器,以我的理解可以把这个标签当成html标签中的div,小程序页面中的各个组件都可以用视图容器view包起来,便于页面排版。至于一些变量的展示则通过双大括号+变量名呈现,比如{{userInfo.nickName}},其他的if判断for循环之类则通过在标签内部使用wx:if={{}}、wx:for{{}}来渲染实现,总体上类比smarty之类的前端处理方式,可以很快熟悉。除此之外还可以引入模板<template></template>、绑定事件与逻辑层进行通讯等等。

而页面样式的wxss,样式属性的控制基本和原生css完全一致,基础属性比如color、margin、padding等都可以通用,暂时没有发现不支持的情况。另外还有一些小程序特有属性,比如尺寸单位rpx(针对手机屏幕像素数量划分750份自适应)之类的。另外微信也提供了基于weui的大量标准样式,比如按钮、画布、toast等等,可以直接使用这些基础组件,提高开发效率。

看文档还有WXS(WeiXin Script),wxs 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。本次开发并没有用到,所以也没做深入研究。

逻辑层:

小程序逻辑层基于JavaScript,在此基础上增加了App、Page方法,具体可以参看小程序官方文档。通过逻辑层js与后端接口交互,不论是ajax、post、get操作都与原生js方法区别不大。

另外逻辑层提供了丰富的API,分为网络、媒体、文件、数据缓存、位置、设备、界面、开放接口等等几大类,有需要时可通过文档查询。在这里举一个常用的例子:所有微信用户都对应一个唯一标识openid,获取用户ID往往是一切用户层面操作的基础,而微信不会直接将openid给出,默认只给一个临时的登陆凭证code,需要我们拿这个code拼接上小程序的appid和appsecret去换取,GET方法去调用微信的登陆接口,之后才能获取到用户ID。

  • 发布

小程序最初限制整个代码包大小为1M,去年改成了2M,并且支持分包加载,最大不超过8M即可。

开发完成后,通过开发者工具上传,再登陆开放平台将上传的代码包提审。


  • 踩过的坑

长期写后端代码,js一直比较弱,七牛财富小程序的列表页是是以天为单位来展示新闻摘要,因此在PHP使用关联数组将数据传到了小程序前端逻辑层,后端组织数据时以日期为key,当天新闻为value再封一个索引数组,通过嵌套wx:for循环渲染出来,下滑加载下一页,使用了cancat做数组拼接。调试中出现无法加载第二天及之后的内容,js报错。后来发现是因为cancat只能拼接索引数组,js把关联数组当成对象处理,需要用Object.assign()拼接。


七牛财富刚开始的需求是用户先授权头像、昵称,再授权手机号。目前微信已经放开权限,不经过用户授权即可通过open-data type="userAvatarUrl"/"userNickName"获取到头像、昵称,所以第一次授权省去了,接着做第二次授权,代码写完后调试发现微信报错,无权限。获取手机号的话,除了需要账号主体为公司之外,还需要进行认证(给微信打300块钱),两者均满足才可以。