微信小程序-开发环境

欢迎大家关注我的个人微信订阅号 A321之旅。

本文描述的是小程序的整个开发环境的搭建过程。

开发工具

• 下载开发者工具
  从官网上，下载开发者工具 wechat_devtools_1.02.1807200_x64.exe
  https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018712

• 安装开发者工具
  全部采用默认选项进行安装即可。

• 运行开发者工具
  在桌面上找到如下图表，双击运行。
  

导入项目

现今的项目很少会从一个初始的 hello world 开始写起，更多的是将业界相对成熟的开源框架项目导入，然后基于此进行理解、修改、添加，形成属于个性产品的代码。

• 登录开发者工具
  使用管理员微信账户扫描提示信息，进行登陆。此可方便后续的代码开发。
  
  选择小程序项目
  
• 导入项目
  项目目录: 所需导入项目代码所对应的本地目录：如 D:\xxx\project\miniapp-xxx
  AppID: wxfbdxxxxxxxxx（为小程序注册时所申请的ID，可见“微信小程序-申请小程序”）
  项目名称为: 本产品所使用英文名 miniapp-xxx
  
  点击确定后，即可导入项目。
  
• 编译
  点击编译按钮，可查看到项目的首页。在实际开发过程中，一旦代码文件保存，则会自动编译。
  

预览

当小程序编译后，要在真实的手机上进行浏览，则需要使用预览功能。开发工具会自动将代码打包、上传、反馈供查看的二维码。开发者、体验者可以通过手机的微信扫描此二维码以查看小程序的开发版本。而未在开发者、体验者中授权的用户则无法看到小程序开发版。

此二维码有时效性，超时后需要重新生成。

TIP：注意要将后台服务器的地址从 localhost 改为 后台的云服务器地址

使用git

git是很好的代码管理工具，我通过gitlab搭建了一个私有的代码仓库（其他文档描述部署步骤）。

• 创建git项目
  在gitlab上创建项目 xxx-miniapp ，并授权开发者用户允许查看、提交代码，一般权限赋予为 developer 即可。
  git项目地址：http://xxxx:9090/xx/xx-miniapp.git

• 微信开发者工具添加git项目地址
  点击微信开发者工具中的版本管理。
  
  微信开发者工具会报错，未找到对应的git仓库。
  
  选择远程仓库信息设置。
  
  添加git项目信息 http://xxxx:9090/xx/xx-miniapp.git
  
  配置git用户认证信息，我选择的是用户名密码方式，也可以ssh key方式（这种更方便管理）。
  

• 在微信开发者工具中的版本管理中进行代码推送。
  
  由于是首次推送，所以需要推送到新的远程仓库分支，后续可以选择相应的远程仓库分支进行推送。
  

• 代码提交后，在gitlab上查看如下