### 1. 小程序注册： ~~~ https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN ~~~ ### 2. 安装开发者工具： ~~~ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ~~~ ### 3. 登陆配置 ~~~ 1. 微信扫码登陆>小程序项目> 填路径 appid使用测试号 不要配置文件 2. 配置文件如下图 （注：文件夹得名字要和下面的文件名相同） ~~~  ### 4. 文件具体代码 #### 4.1. app.js （外面app.js是app 里面的js是page） ~~~ App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { }, /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */ onShow: function (options) { }, /** * 当小程序从前台进入后台，会触发 onHide */ onHide: function () { }, /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */ onError: function (msg) { } }) ~~~ #### 4.2. app.json ~~~ { "pages": [ "pages/index/index" 配置要显示的页面 小程序的全局配置 有先后顺序 ], "window": { "navigationBarBackgroundColor": "#ffffff", 导航头部颜色 "navigationBarTextStyle": "black", 字体颜色 "navigationBarTitleText": "小程序", 字体内容 "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false } } ~~~ #### 4.3. app.wxss ~~~ 相当于 css中base.css ~~~ #### 4.3. index.wxml ~~~ 相当于html ~~~ ### 4.4. index.js (page相当于new) （要将多余的删掉 不然会报错 用啥留啥） ~~~ Page({ data:{ String1 }, onLoad:function(options){ // 生命周期函数--监听页面加载 String2 }, onReady:function(){ // 生命周期函数--监听页面初次渲染完成 String3 }, onShow:function(){ // 生命周期函数--监听页面显示 String4 }, onHide:function(){ // 生命周期函数--监听页面隐藏 String5 }, onUnload:function(){ // 生命周期函数--监听页面卸载 String6 }, onPullDownRefresh: function() { // 页面相关事件处理函数--监听用户下拉动作 //下拉刷新时触发的函数 String7 }, onReachBottom: function() { // 页面上拉触底事件的处理函数 String8 }, onShareAppMessage: function() { // 用户点击右上角分享 return { title: 'title', // 分享标题 desc: 'desc', // 分享描述 path: 'path' // 分享路径 } } }) ~~~ ### 5.vscode插件安装 ~~~ minapp 小程序助手 vscode weapp api vscode wxml vscode-wechat Easy WXLESS WeApp Snippets ~~~