微信小程序实践

1,523 阅读8分钟

历史总结:

对于一个初学者看完开发者文档,熟悉开发者工具之后,下一步就是开发小程序,进行小程序实战。

小程序从设计稿到发版,中间需要经过哪些步骤,有哪些注意事项,以及一个页面是如何划分功能模块开发出来的,以及怎样使用开发者工具来提高我们的开发效率这三方面来讲,我们结合自己的经验,给大家做个介绍, 仅供大家参考。

一、小程序从设计稿到发版

1.划分页面

当我们拿到设计图之后,第一步要分析设计图总共有多少页面,各个页面的流程关系,查看页面是否有缺失。 都理顺之后,将页面整理出来,在app.json的pages属性中配置;若有Tab页,将其配置到tabBar里。(展示图片)比如像这种设计图,tabBar小程序所特有的属性配置,这里需要注意一下。

2.链接页面

在app.json里将所有的页面都配置好后,小程序很智能化,也帮我们将所有的页面都生成好了。

我们通过链接或者按钮串联起来。此时不需要编任何页面样式和逻辑,只要页面能正常跳转就行。这样一个简易的小程序demo成型了。

目的在于可以快速试错。体验整个项目的流程,如果感觉流程有问题,可以马上返工修改,如果是业务问题,这个时候提出也比较适宜。页面流程没有问题了,把页面间传递的参数固定下来,分别写入跳转链接和onLoad参数中。这样做还有一个好处,其实就可以进行任务划分,将一些关联性比较强的页面分给一个人做。

3.搭建基础设施

小程序的基础设施包括了基础样式库,passport 登录、api请求、HTTP封装、工具类库、和开发公共组件。

根据设计稿的需要,如果小程序设计风格比较统一,我们可以编写通用的样式,引入到app.wxss文件中,app.wxss里的样式是被所有页面共用。

passport可以自己开发,也可以直接使用封装好的SDK。对passport登录封装了两种SDK, 一种是业务需要开启游客模式、有登录界面的,一种是只需要微信授权无登录界面的。

对于api请求,建议将所有api请求集中存放,方便接口复用和统一管理,减轻业务面的复杂度。对 http 请求推荐使用 Promise 编写异步请求,可以避免回调函数嵌套过深造成的 “地狱回调”。 我们可以编写一些通用的工具类或者方法,比如日期格式化,字符串校验等。供大家使用。对于多页面复用较多的功能模块, 我们封装为组件,供多页面使用,降低开发成本。

4.编写静态页面

依照设计稿,完成各页面的样式和功能。我们可以先用mock数据渲染页面。

5.后端联调

等后台接口OK了,我们就可以进行接口联调,以及一些优化调整的工作。

如果小程序有支付功能,务必要提前申请商户号。

6.测试 发版 自测后,首先发布体验版内部测试。体验版测试通过后,向微信提审。 审核通过后,再测试一遍,测试通过后,正式发版上线。(小程序管理平台操作)

我们拿到设计稿后先划分页面,做简易demo做任务划分、搭建基础设施、mock渲染页面、接口联调、到测试发版,这是我们的一个开发流程,那么对于一个小程序页面是怎样开发出来的呢?

二、 页面实战 - 星能量公益排行榜项目

1.首页页面划分

展示设计图 首页的 拿到这个设计图,我们大致可以了解到这个页面包含首页开屏、 弹幕、弹窗、tab切换、日期选择器、支付、明星列表这些功能模块。 相对而言支付功能在多个页面中都存在,我们就可以将它们做成组件,以供多页面重复使用。

图:我想把页面分为 header、content、footer

header: 弹幕

content: 首页开屏、活动弹窗、tab切换、日期选择器、明星列表、支付、消息提示框

footer: buttons

component支付组件: 现在就算把支付功能抽象成组件,其它功能也比较复杂,整个页面比较重,这里我考虑将页面拆分为多个模块。 页面 template: 首页开屏、活动弹窗、消息提示框 header: 弹幕 content : tab切换、日期选择器、明星列表 footer: buttons

component: 支付组件 template: 首页开屏、活动弹窗、消息提示框

2. tempalte 的定义和使用

演示:首页.wxml文件 打开开发者工具 展示 如何定义一个模版片段,然后在不同的地方调用呢? 使用name属性作为模块的名字,然后在