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

摘要：上一篇小程序开发第一篇注册获取同步企业项目数据微信小程序开发者工具下载小程序开发者工具使用小程序原生开发直接使用小程序开发者工具打开项目即可小程序框架开发首选官方提供类开发框架，备选。

上一篇：小程序开发 第一篇：注册、获取unionid同步企业项目数据

下载：小程序开发者工具

使用：

小程序原生开发：直接使用小程序开发者工具打开项目即可

小程序框架开发：首选官方提供类vue.js开发框架 wepy.js ，备选 mpVue。我们选择的是 wepy
PS：mpvue尤大大亲自点赞，目前github已经有10k+ star。无论哪个框架都是用来方便开发，同时也都是需要学习成本的。大家可以根据自己项目进度自行选择，下面是一张区别图：

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之后，初始化项目有配置文件，如图没有报错了，؏؏☝ᖗ乛◡乛ᖘ☝؏؏完美。

预览：项目不能超过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：有坑一起填，有发现新坑，或者写的不对的地方请指正