手把手教你如何搭建一个简单的微信小程序-陌上烟雨遥

开发工具:HBuilderX 1.0 (编写工具)+微信开发者工具 1.2(发布程序审核)

开发环境：win 10+uni-app+vue+js+DCloud组件

调试环境：Huawei nova 3（开发者模式）真机调试+微信开发者工具模拟器调试

项目:uni-app

手把手教你如何搭建一个简单的微信小程序插图

重点：

1.创建微信公众号平台小程序账号填写信息获取AppId 手把手教你如何搭建一个简单的微信小程序插图1

2.pages.json核心配置官网介绍：https://uniapp.dcloud.io/collocation/pages


 //pages.json 页面配置如下： { //pages页面配置 不然无法页面跳转 "pages": [{ "path": "pages/first/first", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/handpick/handpick", "style": { "navigationBarTitleText": "精选", "app-plus": { "titleNView": { "buttons": [{ "text": "北京市", "fontSize": "14", "select": true, "width": "auto" }] } } } }, { "path": "pages/strategy/strategy", "style": { "navigationBarTitleText": "攻略" } }, { "path": "pages/dynamic/dynamic", "style": { "navigationBarTitleText": "动态" } }, { "path": "pages/common/details", "style": { "navigationBarTitleText": "详情评论" } }, { "path": "pages/strategy/strategyDetail", "style": { "navigationBarTitleText": "攻略详情" } } ], "globalStyle": { //顶部样式 "navigationBarTextStyle": "white", //文字颜色 "navigationBarTitleText": "uni-app", //默认文字 可覆盖 "navigationBarBackgroundColor": "#00004f", //背景颜色 "backgroundColor": "#FFFFFF", //窗口的背景色 "enablePullDownRefresh":true //全局开启下拉刷新 }, "tabBar": { //配置底部导航 "color": "#7A7E83", //未选中的菜单文字颜色 "selectedColor": "#007AFF", //选中时的菜单文字颜色 "borderStyle": "black", "backgroundColor": "#F8F8F8", //背景 "list": [{ "pagePath": "pages/first/first", //页面地址 "iconPath": "static/api.png", //未选中时的图片 "selectedIconPath": "static/apiHL.png", //选中时的图片 "text": "首页" //菜单文字 }, { "pagePath": "pages/handpick/handpick", "iconPath": "static/component.png", "selectedIconPath": "static/componentHL.png", "text": "精选" }, { "pagePath": "pages/strategy/strategy", "iconPath": "static/extui.png", "selectedIconPath": "static/extuiHL.png", "text": "攻略" }, { "pagePath": "pages/dynamic/dynamic", "iconPath": "static/template.png", "selectedIconPath": "static/templateHL.png", "text": "动态" } ] } } 
 //pages.json 页面配置如下： { //pages页面配置 不然无法页面跳转 "pages": [{ "path": "pages/first/first", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/handpick/handpick", "style": { "navigationBarTitleText": "精选", "app-plus": { "titleNView": { "buttons": [{ "text": "北京市", "fontSize": "14", "select": true, "width": "auto" }] } } } }, { "path": "pages/strategy/strategy", "style": { "navigationBarTitleText": "攻略" } }, { "path": "pages/dynamic/dynamic", "style": { "navigationBarTitleText": "动态" } }, { "path": "pages/common/details", "style": { "navigationBarTitleText": "详情评论" } }, { "path": "pages/strategy/strategyDetail", "style": { "navigationBarTitleText": "攻略详情" } } ], "globalStyle": { //顶部样式 "navigationBarTextStyle": "white", //文字颜色 "navigationBarTitleText": "uni-app", //默认文字 可覆盖 "navigationBarBackgroundColor": "#00004f", //背景颜色 "backgroundColor": "#FFFFFF", //窗口的背景色 "enablePullDownRefresh":true //全局开启下拉刷新 }, "tabBar": { //配置底部导航 "color": "#7A7E83", //未选中的菜单文字颜色 "selectedColor": "#007AFF", //选中时的菜单文字颜色 "borderStyle": "black", "backgroundColor": "#F8F8F8", //背景 "list": [{ "pagePath": "pages/first/first", //页面地址 "iconPath": "static/api.png", //未选中时的图片 "selectedIconPath": "static/apiHL.png", //选中时的图片 "text": "首页" //菜单文字 }, { "pagePath": "pages/handpick/handpick", "iconPath": "static/component.png", "selectedIconPath": "static/componentHL.png", "text": "精选" }, { "pagePath": "pages/strategy/strategy", "iconPath": "static/extui.png", "selectedIconPath": "static/extuiHL.png", "text": "攻略" }, { "pagePath": "pages/dynamic/dynamic", "iconPath": "static/template.png", "selectedIconPath": "static/templateHL.png", "text": "动态" } ] } } 
 //pages.json 页面配置如下： { //pages页面配置 不然无法页面跳转 "pages": [{ "path": "pages/first/first", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/handpick/handpick", "style": { "navigationBarTitleText": "精选", "app-plus": { "titleNView": { "buttons": [{ "text": "北京市", "fontSize": "14", "select": true, "width": "auto" }] } } } }, { "path": "pages/strategy/strategy", "style": { "navigationBarTitleText": "攻略" } }, { "path": "pages/dynamic/dynamic", "style": { "navigationBarTitleText": "动态" } }, { "path": "pages/common/details", "style": { "navigationBarTitleText": "详情评论" } }, { "path": "pages/strategy/strategyDetail", "style": { "navigationBarTitleText": "攻略详情" } } ], "globalStyle": { //顶部样式 "navigationBarTextStyle": "white", //文字颜色 "navigationBarTitleText": "uni-app", //默认文字 可覆盖 "navigationBarBackgroundColor": "#00004f", //背景颜色 "backgroundColor": "#FFFFFF", //窗口的背景色 "enablePullDownRefresh":true //全局开启下拉刷新 }, "tabBar": { //配置底部导航 "color": "#7A7E83", //未选中的菜单文字颜色 "selectedColor": "#007AFF", //选中时的菜单文字颜色 "borderStyle": "black", "backgroundColor": "#F8F8F8", //背景 "list": [{ "pagePath": "pages/first/first", //页面地址 "iconPath": "static/api.png", //未选中时的图片 "selectedIconPath": "static/apiHL.png", //选中时的图片 "text": "首页" //菜单文字 }, { "pagePath": "pages/handpick/handpick", "iconPath": "static/component.png", "selectedIconPath": "static/componentHL.png", "text": "精选" }, { "pagePath": "pages/strategy/strategy", "iconPath": "static/extui.png", "selectedIconPath": "static/extuiHL.png", "text": "攻略" }, { "pagePath": "pages/dynamic/dynamic", "iconPath": "static/template.png", "selectedIconPath": "static/templateHL.png", "text": "动态" } ] } }

3.编码注意组件的和代码的兼容性多看uni-app官方文档 https://uniapp.dcloud.io/

4.HBuilder x发行小程序到微信开发者工具中时微信开发者工具中打开服务端口设置->安全设置->安全

5.小程序布局样式结果以微信开发者工具结果为主，可进行机型调试 <开发过程中，真机调试，代码未做到自适应>

6.微信开发者工具上传小程序到微信公众号平台，等待审核，建议开发版本变成体验版

手把手教你如何搭建一个简单的微信小程序插图2