1.微信小程序开发者工具

使用：

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

小程序框架开发：首选官方提供类vue.js开发框架 wepy.js ，备选 mpVue。我们选择的是 wepy

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

2.wepy.js 初始化项目

全局安装或更新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选中，更好的调试。

小程序开发注意事项

视图设计官方推荐以 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：有坑一起填，有发现新坑，或者写的不对的地方请指正