上一篇：小程序开发 第一篇：注册、获取unionid同步企业项目数据
1.微信小程序开发者工具
- 下载：小程序开发者工具
- 使用：
- 小程序原生开发：直接使用小程序开发者工具打开项目即可
小程序框架开发：首选官方提供类vue.js开发框架 wepy.js ，备选 mpVue。我们选择的是 wepy
PS：mpvue尤大大亲自点赞，目前github已经有10k+ star。无论哪个框架都是用来方便开发，同时也都是需要学习成本的。大家可以根据自己项目进度自行选择，下面是一张区别图：
2.wepy.js 初始化项目
- wepy官方文档入口
- 全局安装或更新WePY命令行工具
npm install wepy-cli -g
- 初始化项目
wepy new myproject
# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板- 切换项目并安装依赖
cd myproject
npm install- 开启实时编译，官方给出的指令是 wepy build –watch，不习惯- -，那就在package.json -> scripts 配置一条新命令 “dev”: “wepy build –watch”， 我们就可以愉快的 npm run dev
npm run dev- 项目目录结构介绍（wepy官方目录修改版，没有太大变动，可以自行修改）
###开发
###目录结构
<pre>
.
├── dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules
├── src 代码编写的目录（该目录为使用WePY后的开发目录）
| ├── api 接口集合目录（目前我们使用 Promise 封装小程序接口，集中设置登录缓存、环境切换, 直接向外暴露方法）
| ├── components WePY组件目录（组件不属于完整页面，所以不会有josn配置，不能直接配置小程序）
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── images tabbar图片存放
| ├── mixins 可复用方法抽离库
| | └── test.js page页中引入后调用 mixins = [test], 当前page方法优先执行，混合函数方法后执行，与 vue相反
| ├── mocks 本地mock数据
| ├── pages WePY页面目录（属于完整页面）
| | ├── index.wpy index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
| | └── other.wpy other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
| ├── styles 基础样式库
| | ├── iconfont 字体图标文件夹
| | └── base.css 基础样式库，原子类等。
| ├── utils 工具函数库
| | └── util.js 存放第三方工具库和一些基础方法，比如日期格式化、文件大小格式化、节流函数等
| └── app.wpy 小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json 项目的package配置
</pre>
- 现在，我们初始化一个小程序项目，myproject 项目编译后生成一个 dist 文件夹，这个文件夹存放变异后的小程序原生代码。打开小程序开发者工具选中 dist 文件，填写 appid、项目名称(本地开发名称随便填写，并非小程序真正名称)。
项目开启：
- 框架开发，不需要小程序编辑器。头像右侧3个选项，关闭编辑器，打开自己的编辑器，推荐vsCode
- 查看调试器 Console,会发现一堆报错，不要慌。 wepy.js v1.7.0之前是没有 project.config.json 配置小程序开发工具文件的，需要手动关闭。点击开发者工具右上角 详情 -> 项目配置
- wepy.js v1.7.0之后，初始化项目有配置文件，如图
没有报错了，؏؏☝ᖗ乛◡乛ᖘ☝؏؏完美。
3.真机调试
- 预览：项目不能超过2M，点击小程序开发者工具 预览 按钮，已添加权限的开发者使用微信扫码，小程序在手机端打开了。一般开发环境接口均为 http , 真机预览会失败，打开右上角胶囊按钮菜单 -> 打开调试 即关闭了小程序https证书检测，重新打开小程序即可预览。
- 远程调试:类似预览，但是会重新打开一个控制台，选择Wxml,可以看到真机端有DOM选中，更好的调试。
小程序开发注意事项
- 视图设计官方推荐以 iPhone6 为准。小程序适配单位为 rpx，设计图为iPhone6是最方便开发的，量多少写多少，只是单位用rpx。
- 小程序预览、发布，都是有大小限制的，最大为2M，寸土寸金。项目中一般图片最大，设计给图后，首先第一步 压缩！压缩！压缩！ 压缩图片网站，然后放到静态资源管理平台CDN等，生成网络资源。 小程序原生tabbar图片只支持 png/jpg/jpeg ,只能是本地图片。
- iconfont使用，这个就比较坑了，小程序支持iconfont，本地模拟器也是没问题的，但是真机就尴尬了，真机不识别*tff字体图标文件，只支持Base64格式，所以我们的 *tff文件需要转码（ https://transfonter.org/ ）使用方法：
转码成功后替换 iconfont.css 内 @font-face下src 内容即可，当然这里也有坑，base64后 icon 没有颜色了，所以单色值icon可以用 iconfont, 色彩比较多的icon还是用压缩后的网络图片吧
PS：有坑一起填，有发现新坑，或者写的不对的地方请指正
