本节课内容

小程序开发

主讲人介绍

沁修，葡萄藤技术总监

项目经验丰富，擅长H5移动项目开发。

专注技术选型、底层开发、最佳代码实践规范总结与推广。

1.小程序的介绍和准备

1.1 什么是小程序

微信之父张小龙是这样描述的：

小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的孟县。用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

1.2 它的优势

体验上虽然没法完全媲美原生app，但综合考虑还是有很多优势：省流量省时间；开发成本更低，可以把更多人力物力财力放在运营上，做好内容本身；总体来说相当于一个精简版的app

2.准备工作：

    1.注册账号 （https://mp.weixin.qq.com）

    2.**邮箱

    3.信息登记

    4.登录小程序管理后台（不完善好信息是无法发布小程序的）

    5.完善小程序信息，绑定开发者（尤其是团队多人开发）

在官网下载安装开发工具

安装完成后就可以登录：微信扫码登录开发者工具，这里选小程序项目，进入小程序本地项目进行管理

新建一个项目：目录自选本地文件夹，AppID就是登录微信开发平台后的设置里能看到的AppID，如果没有ID也可以使用官方的测试号，但这样只能做做简单的本地测试，最后是填上适合的项目名称。

2.上手第一个小程序

新建项目，选择一个空目录，使用普通快速启动模板

然后就可以看到预设的模板和内容了，可以直接查看或者点击编译在手机上扫一扫查看：

接下来了解一下小程序的目录结构：

pages                        

    index

        index.js            页面脚本逻辑文件

        index.wxml      页面模板文件

        index.wxss      页面样式文件

        index.json        单个页面的配置信息，比如头部底色，头部title等

utils

app.js                      全局逻辑

app.json                  全局配置信息，包含了小程序的所有页面路径，界面表现，底部tab等基本信息

app.wxss                设置样式

project.config.json  开发工具的配置信息

小程序的启动过程：

打开小程序之前，微信会把小程序的代码包下到本地，然后通过app.json的pages字段知道当前小程序的所有页面路径，写在pages字段的第一个页面就是小程序的首页。然后微信就把首页代码装载进来，渲染出首页。

然后app.js里App的实例onLaunch回调就会执行

来一段简单的实战，为项目增加一个city选择页：

首先添加一个新的页面

1.在pages文件添加新页面文件

2.为city.wxml模板页面添加选择器：

picker是一个类似于select的picker组件，bindchange是用于绑定一个change事件的方法，value的值是一个***，range则是表示这个选择器的取值范围。

3.然后在city.js中书写页面逻辑：

Page({})是页面的一个实例，data中的数据用于视图绑定，bindPickerChange则是绑定的change事件的函数名。

可以看到，data中的数据可以在页面中被直接绑定使用，在js代码中想要改变data的值也非常简单，使用this.setData就可以了，这里我们传入了一个index***，也就是picker选择器选择了country数组中的元素。通过这样的方法，就可以为页面添加不同的组件。

4.选择之后如果想要将选中的city的值传到其他页面比如首页，那么一般来讲有3种方法：

第一种是将数据存到全局的data中，也就是app.js的data中，这样所有的页面都能取到这些数据。但我们并不推荐这样的用法，就如同我们不推荐使用全局变量都一样。

第二种是将数据带在url路径后作为参数传导：http://local.com/foo?bar=abc。这样的做法在传输复杂数据的时候并不是太合适。

第三种则是使用本地存储，在需要的页面再将其取出就可以了：

// 存储

wx.setStorageSync('city', {});

// 取出

wx.getStorageSync('city');

这样就完成了我们的第一个上手小页面的开发，更多的细节，依旧希望大家去官方网站查看文档。

以上就是上节课的内容解析啦

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。

技能树.IT修真院