在做完了两个vue项目之后 ， 我开始了小程序的学习 ， 由于开学等因素影响进度一直都是断断续续的 。最终在开学一周多的时间结束了项目的练习 。于是我选择了黑马商场做为微信小程序的练手 。
是一个基于vue.js开发的一个前端框架 ， 可以发布各个平台 ， 本项目是开发一个微信小程序 ， 使用中的内置的uni.ui模块 。使用了sass ， 练习了对微信小程序开发的一套相对完整的流程 ， 还有用git提交代码到gitee 。
小程序中一个不同于网页的地址在于栏 ， 微信小程序中 ， 栏可以通过配置生成 ， 也方便管理 。只要在根目录中的pages.json配置文件 ， 新增的配置节点即可
{"tabBar": {"selectedColor": "#C00000","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "static/tab_icons/home.png","selectedIconPath": "static/tab_icons/home-active.png"},{"pagePath": "pages/cate/cate","text": "分类","iconPath": "static/tab_icons/cate.png","selectedIconPath": "static/tab_icons/cate-active.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "static/tab_icons/cart.png","selectedIconPath": "static/tab_icons/cart-active.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tab_icons/my.png","selectedIconPath": "static/tab_icons/my-active.png"}]}}
之后再修改一个导航条的模式效果 ， 也是在pages.json中 ， 修改节点
{"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "黑马优购","navigationBarBackgroundColor": "#C00000","backgroundColor": "#FFFFFF"}}
然后就是配置网络请求了 ， 因为小程序中是不支持axios的 ， wx.()又功能简单 ， 不能支持拦截器等 ， 所以这个项目老师用了一个自己写的第三方包来发起网络请求的 ， 官方文档如下：
@/- - npm
再main.js入口文件中配置 ， 引入再绑定到uni顶级对象上 ， 再加个请求和响应拦截器
import { $http } from '@escook/request-miniprogram'uni.$http = $http// 配置请求根路径$http.baseUrl = 'https://www.uinav.com'// 请求开始之前做一些事情$http.beforeRequest = function (options) {uni.showLoading({title: '数据加载中...',})}// 请求完成之后做一些事情$http.afterRequest = function () {uni.hideLoading()}
轮播图
发起请求 ， 再动态把图片的src等属性渲染到页面上 ， 用小程序自带的标签 。
小程序分包
考虑到首次启动的加载时间 ， 可以采用分包 ， 而且微信小程序也对分包的大小有检测 ， 所以我们是把相关的页面（home,cate,cart,my）放在主包 ， 再把其它页面放在分包里（ ，  ， ） 。配置分包如下：
1、先在根目录中 ， 创建分包的根目录 ， 命名
2、再在pages.json中 ， 与pages平级配置节点
{"pages": [{"path": "pages/home/home","style": {}},{"path": "pages/cate/cate","style": {}},{"path": "pages/cart/cart","style": {}},{"path": "pages/my/my","style": {}}],"subPackages": [{"root": "subpkg","pages": []}]}
3、之后可在分包目录下 ， 新建页面 ， 并选择小程序分包 ， 即可自动配置
封闭uni.$()方法
使用原生uni.({})来提示用户 ， 要配置配置对象 ， 所以封闭全局方法来简化之后的使用
// 封装的展示消息提示的方法uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {uni.showToast({title,duration,icon: 'none',})}