微信小程序开发 ——（微信开发者工具篇）

介绍：

     此程序为转盘抽奖demo，设计前后端交互以及上线运营服务器部署等大致流程（本篇为小程序开发工具篇，将尽量以最简化的步骤来记录），观看此文章的小伙伴都默认为有一定的前后端以及部署项目等知识储备。

一，注册微信小程序

 1.进入微信小程序官网（https://mp.weixin.qq.com/） 选择下方小程序 -> 前往注册（之后按顺序填写信息备案）

（注：如个人测试使用 1-起名的时候尽量带测试字眼更容易通过 2-还有个人信息中的地址也要详细 3-人脸识别时候背景不能有别的闲杂人等 以上三点为本人第一次备案被退回原因 审核大概两三个工作日）

二，下载小程序开发工具

  1.下载地址为  概览 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

点击微信开发链接进入下载

​

2.本人下载版本为稳定版

​

3.输入AppID 后端选择不使用云服务  选择合适的模板（此次demo使用的是js模板）

4.上图中所需AppID就是在小程序端的 开发管理—>开发设置中的

三，目录结构 

一个页面由四部分组成（js、json、wxml、wxss） 具体文档参考

微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

​

四，项目阶段

(如跟本人一样属于前端菜狗的小卡拉咪可以去搜一下简单的小程序代码 对应的四个文件 CV即可)

 1.如只是在电脑端测试用 在pages目录下的images目录下（自己创建个也可）将图片拖入即可

 2.想在手机端测试图片就不能放在小程序开发工具中 （可以本机启一个idea项目 在微信小程序端调用图片时使用后端的地址＋图片路径） 如图 这样就可以

2.手机端展示效果 编译之后点预览 微信扫码之后所见即所得（注：仅你个人注册小程序时使用的微信有这个权限）

至此 全部仅用js开发的demo模板就已经完成 如果将小程序需要转发给别人需要花费30开通服务（太狗了） 并且次个人测试版本的小程序在微信下拉最近小程序时 会显示（开发版）三个字的logo 

（仅用前端代码开发只考虑到调用微信接口将用户信息缓存到用户手机中，如果后续不需要扩展以及功能要求简单至此已经足够 可以跳转第三篇服务部署篇）

下篇为后端Java篇，为了解决1-用户登录信息入库 2-权限控制 3-回显数据等操作问题