// json文件 { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText":"我的", "usingComponents": { "menu": "/components/menu/index" } } // js文件 const app = getApp() Page({ data: {}, onLoad: function () {}, })
七、实现页面跳转
和通常的web开发一样，小程序页面跳转页分2中，wxml中的vavigator标签，以及js的navigator相关的api。路由跳转的方法有好几个，这里不一一赘述了，常用的直接跳转
wx.navigateTo，重定向 wx.redirectTo等等，具体的请看官方文档。这里强调一下路由传参，很简单：
1、少量数据。直接问号传参。然后在目标页面的onLoad方法中通过options参数接收。
2、大量数据。直接塞到全局变量里面。
// wxml跳转页面 <navigator url="/pages/my{{item.path}}"> <image src="https://www.jb51.net/{{item.icon}}"></image> <view data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view> </navigator> //js跳转页面 wx.navigateTo({ url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}` }) //路由传参如何接收 onLoad: function (options) { console.log(options) },
八、wx.request 的封装
在utils中新建request.js，简单封装了一下，一些数据要全局配置的都引进来，然后做了些错误的统一处理，没什么难度，不过要特别注意一下cookie的携带。具体代码如下：
const app = getApp() export default function request(url, options = {}) { return new Promise(function (resolve, reject) { wx.request({ url: `${app.origin}${url}`, method: 'GET', ...options, data: options.data, header: { 'content-type': 'application/json', 'cookie': wx.getStorageSync("cookie") }, success: function (res) { //重新授权登录 if (res.statusCode === 401){ wx.redirectTo({url: '/pages/login/index'}) return }else if (res.statusCode !== 200) { reject({ error: '服务器忙，请稍后重试', code: 500 }); return } else { if (url === '/api/cdz/user/weixin/login') { const cookie = res.header["set-cookie"] || res.header["Set-Cookie"]; if (cookie) wx.setStorageSync("cookie", cookie); } resolve(res.data); } }, fail: function (res) { // fail调用接口失败 if (url === '/api/cdz/user/weixin/login') { const cookie = res.header["set-cookie"] || res.header["Set-Cookie"]; if (cookie) wx.setStorageSync("cookie", cookie); } reject({ error: '网络错误', code: 0 }); } }) }) }
然后我们使用的时候直接使用封装好的request方法，这样所有的api就封装成一个个函数。我们在页面中直接import引入调用即可。
import request from "../utils/request"; import { stringify } from "../utils/util" export function testPost(data) { return request(`/api/test/post`, { method: 'PUT', data, }) } export function testGet(data) { return request(`/api/test/get`) }
九、使用 npm （引入 weui、moment等插件）
因为小程序使用的是不完整的浏览器对象，所以很多js包都是不好使的，比如jquery之类的。所以npm基本是废了，能用的依赖包很少，具体哪些能用得自己发掘了。这里还是要介绍一下小程序如何使用npm，毕竟有些包还是要用的。
1、打开 微信开发者工具 -- 点击 详情 -- 勾选 使用npm模块
2、打开命令行，进入项目的根目录下， npm init 初始化npm
3、npm i 。。。安装你需要的依赖
4、打开 微信开发者工具 -- 点击 工具 -- 点击 构建npm。 此时小程序会将 node_modules 文件编译打包，生成新目录 miniprogram_npm ，
5、在需要用到的页面的js文件中，const moment= require('moment') 引入，直接使用即可
6、最后记得忽略文件。新建 .gitignore 文件，node_modules 、 package_lock.json 等文件不需要上传，最好只保留小程序的npm构建包，用什么依赖也是的那个下载。这个到不是必须的
ps: 特殊注意一下weui的引入，这个ui库是纯css的，没有js文件，所以他没法用npm引入，而是直接下载文件，我直接丢到根目录下，然后在 app.wxss 文件的开头引入
@import 'weui.wxss';，这样使用的
十、封装微信小程序可复用组件
现在篇幅有点太长了，这个另写一篇，有需要的可以去看。
十一、总结
以上就是我开发小程序的一些经验和总结，希望能帮到你。另外，整套程序的骨架（业务代码删掉了）我会上传到github，下载 有需要的可以去下载，记得点个赞，哈哈。
最后，我会另写一篇博客，写一下 如何封装小程序 组件，并附上 我开发小程序遇到的坑，以及对应的解决方法。