修真院Web工程师零基础全能课
本节课内容
微信小程序开发入门
主讲人介绍
沁修，葡萄藤技术总监
项目经验丰富，擅长H5移动项目开发。
专注技术选型、底层开发、最佳代码实践规范总结与推广。
直播录屏版
https://v.qq.com/x/page/n0760yz7r2z.html
文字解析版
小程序的介绍和准备
什么是小程序
微信之父张小龙是这样描述的：
小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
用户不用关心是否安装太多应用的问题：
应用将无处不在，随时可用，但又无需安装卸载。
小程序的优势
它的优势体验上虽然没法完全媲美原生app，但综合考虑还是有很多优势：
省流量省时间；开发成本更低，可以把更多人力物力财力放在运营上，做好内容本身；
总体来说相当于一个精简版的app
准备工作
1.注册账号 （https://mp.weixin.qq.com）
2.激活邮箱
3.信息登记
4.登录小程序管理后台（不完善好信息是无法发布小程序的）
5.完善小程序信息，绑定开发者（尤其是团队多人开发）
在官网下载安装开发工具
安装完成后就可以登录：
微信扫码登录开发者工具，这里选小程序项目，进入小程序本地项目进行管理
新建一个项目：
目录自选本地文件夹，AppID就是登录微信开发平台后的设置里能看到的AppID。
如果没有ID也可以使用官方的测试号，但这样只能做做简单的本地测试，最后是填上适合的项目名称。
上手第一个小程序新建项目
选择一个空目录，使用普通快速启动模板
然后就可以看到预设的模板和内容了，可以直接查看或者点击编译在手机上扫一扫查看
接下来了解一下小程序的目录结构：
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交流群565734203共同交流学习！
推荐阅读：
欢迎加大师姐微信了解更多信息