小程序开发 第二篇：使用微信小程序开发者工具、wepy框架初始化项目

上一篇：小程序开发 第一篇：注册、获取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官方目录修改版，没有太大变动，可以自行修改）

###开发

###目录结构
.
├── 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配置

• 现在，我们初始化一个小程序项目，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选中，更好的调试。

---

小程序开发注意事项

1. 视图设计官方推荐以 iPhone6 为准。小程序适配单位为 rpx，设计图为iPhone6是最方便开发的，量多少写多少，只是单位用rpx。
2. 小程序预览、发布，都是有大小限制的，最大为2M，寸土寸金。项目中一般图片最大，设计给图后，首先第一步 压缩！压缩！压缩！ 压缩图片网站，然后放到静态资源管理平台CDN等，生成网络资源。 小程序原生tabbar图片只支持 png/jpg/jpeg ,只能是本地图片。
3. iconfont使用，这个就比较坑了，小程序支持iconfont，本地模拟器也是没问题的，但是真机就尴尬了，真机不识别*tff字体图标文件，只支持Base64格式，所以我们的 *tff文件需要转码（ https://transfonter.org/ ）使用方法：

转码成功后替换 iconfont.css 内 @font-face下src 内容即可，当然这里也有坑，base64后 icon 没有颜色了，所以单色值icon可以用 iconfont, 色彩比较多的icon还是用压缩后的网络图片吧

PS：有坑一起填，有发现新坑，或者写的不对的地方请指正

---