微信小程序开发
小程序的诞生带来了互联网产品新一轮的变革，小程序正发挥着日益重要的作用。
最近珺珺问我她想学习微信小程序开发，但是不知道从何下手，本文我将介绍微信小程序的优点及开发环境的搭建。
小程序是什么，相信不用做太多介绍了，下面直入主题。(注：蓝色字体代表链接)
一、微信小程序的优点:
1、用户体验好：便捷地获取服务，无需安装卸载，即用即走；
2、流量获取易：背靠10亿+微信用户；
3、开发成本低：节省大量资金、时间、人力，从而做好自己的产品；
4、微信生态强：微信生态体系、多渠道实现营销推广，节省推广成本；
5、具有更丰富的功能和出色的使用体验，也会降低用户的使用难度；
6、无跨端限制：兼任IOS、Android等系统；
7、无需下载，用完即走 ：实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可使用 ；
……
小程序与微信公众号相比，具有的优势
1、公众号加载速度慢，用户体验远不如小程序的瞬时打开;
2、公众号的用户入口太深，订阅号折叠。而小程序只需扫二维码或搜索即可进入；
3、公众号只能退出后才能进入聊天框，而小程序可与微信聊天框实时切换；
4、公众号数据不能实时上传，而小程序离线后数据实时上报，及时掌握运营状态；
5、公众号接口少，开放功能少，而小程序接口多，功能强大；
……
二、搭建微信小程序开发环境
1、首先需要在微信小程序官方平台【微信公众平台】注册登录你的账号。
微信公众平台:
2、随后进入开发选项，找到你的专属APPID 。
在这里插入图片描述
3、接下来进入工具选项，下载微信开发者工具，这里推荐新手根据个人电脑操作系统使用稳定版本。
4、创建项目：项目名称自拟，选择路径后将此前注册查找到的个人APPID填入，当然你也可以选择使用测试号体验。新手入门推荐选择不使用云开发模式。
目录结构:
全局配置设置:
创建页面的方式有两种
1通过app.json 创建页面
输入路径后系统会自动生成项目文件
2、直接创建页面
在pages文件下右击创建文件夹后右击创建page文件，文件名均可自拟。
window
用于设置小程序的状态栏、导航条、标题、窗口背景色等。
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
点击链接即可跳转到微信小程序官方文档查看
页面元素:
页面逻辑处理
页面样式处理
页面间的路由跳转传值:
快捷键设置:
组件:
组件在component文件下设置
生命周期函数
快速开发框架:
这里推荐有赞团队推出的Vant weapp UI框架，通过官方文档教程，npm下载相应的包之后即可使用。
在app.json或index.json中引入组件后，复制框架代码即可使用UI框架，快速上手搭建前端页面。
参考:
[1]韩舶.微信小程序发展现状及其前景探析[J].数字传媒研究,2020,37(08):5-9.
三、Vue&微信小程序
vue.js和微信小程序开发有很多相似之处，如下图，推荐将两者进行对比学习：
与vue对比
| 序号 | 差异 | vue框架 | 微信小程序 |
|---|---|---|---|
| 1 | 样式 | style标签 | .wxss文件 |
| 2 | 行为 | script标签 | .js文件 |
< wxs >标签 | |||
| 3 | 结构 | template标签 | .wxml文件 |
| 4 | 盒子 | div | view |
| 5 | 文本 | span | text |
| 6 | 属性绑定 | <span :title='lay'></span> | <text title='{{msg}}'></text> |
| 7 | 流程分支 | v-for | wx:for |
| 8 | 判断 | v-if()=''/v-else | wx:if='{{}}'/wx:else |
| 9 | 显示隐藏 | v-show='' | hidden='{{}}' |
| 10 | 生命周期 | 8种 | 应用3种+页面5种+组件6种 |
| 11 | 编程式路由 | v-show='' | hidden='{{}}' |
| 12 | 组件式路由 | <router-link to='地址'></router-link> | <navigator url="地址"></navigator> |
| 13 | 路由参数 | <router-link to='地址?id=1'></router-link> | <navigator url="地址?id=1"></navigator> |
| 14 | 网络请求 | axios | wx.request() |
| 15 | 绑定事件 | @click | bindtop='' |
| 16 | 双向绑定 | v-model='' | bindinput='' |
| 17 | 获取data数据 | this.msg | this.data.msg |
| 18 | 设置data数据 | this.msg='' | this.setdata({msg:''}) |
| 19 | 创建方法 | methods:{test(){}} | 与data同级直接创建 |
未完待续，我将不定期更改迭代…