使用 UniAPP 构建项目
创建项目.png
小程序配置.png
构建项目结构.png
初始化基础页面及配置 pages.json Pages 路由
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
// custorm 取消顶部的 navBar 显示
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
}, {
"path": "pages/feeds/feeds",
"style": {
"navigationBarTitleText": "前端动态",
"enablePullDownRefresh": true
}
}, {
"path": "pages/me/me",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
}, {
"path": "pages/webview/webview",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
配置页面 TabBar 导航
pages.json
"tabBar": {
"color": "#000",
"selectedColor": "#0050FF",
"list": [{
"iconPath": "/static/tabbar-icons/index.png",
"selectedIconPath": "/static/tabbar-icons/index_s.png",
"text": "首页",
"pagePath": "pages/index/index"
},
{
"iconPath": "/static/tabbar-icons/feeds.png",
"selectedIconPath": "/static/tabbar-icons/feeds_s.png",
"text": "动态",
"pagePath": "pages/feeds/feeds"
},
{
"iconPath": "/static/tabbar-icons/me.png",
"selectedIconPath": "/static/tabbar-icons/me_s.png",
"text": "我的",
"pagePath": "pages/me/me"
}
]
}
使用 npm 引入 uView UI 插件库
-
- 使用 HBuilder 导入插件 uViewUI 或者使用 npm 安装相关依赖（推荐使用 npm 安装）
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
- main.js引入uView库
// main.js
import uView from 'uview-ui';
Vue.use(uView);
- 编辑器安装相关依赖 工具 — 插件安装 — scss 编译支持
scss 编译.png
- App.vue引入基础样式
/* App.vue */
- uni.scss引入全局scss变量文件
/* uni.scss */
@import "uview-ui/theme.scss";
- pages.json配置easycom规则(按需引入)
// pages.json
{
"easycom": {
// 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
// npm安装方式
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
Api全局配置，请求，响应拦截
在/config/request.js中，写入如下内容：
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
// 初始化请求配置
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = 'https://www.example.com'; /* 根域名 */
return config
})
// 请求拦截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
config.data = config.data || {}
// 根据custom参数中配置的是否需要token，添加对应的请求头
if(config?.custom?.auth) {
// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
config.header.token = vm.$store.state.userInfo.token
}
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
// 响应拦截
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
const data = response.data
// 自定义参数
const custom = response.config?.custom
if (data.code !== 200) {
// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
if (custom.toast !== false) {
uni.$u.toast(data.message)
}
// 如果需要catch返回，则进行reject
if (custom?.catch) {
return Promise.reject(data)
} else {
// 否则返回一个pending中的promise，请求不会进入catch中
return new Promise(() => { })
}
}
return data.data === undefined ? {} : data.data
}, (response) => {
// 对响应错误做点什么 （statusCode !== 200）
return Promise.reject(response)
})
}
引用配置
我们可以在main.js中引用/config/request.js，注意引用的位置，需要在new Vue得到Vue实例之后，如下：
import Vue from 'vue'
import App from './App'
// 假设您项目中已使用VueX
import store from './store'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView)
import mixin from './common/mixin'
Vue.mixin(mixin)
const app = new Vue({
store,
...App
})
// 引入请求封装，将app参数传递到配置中
require('/config/request.js')(app)
app.$mount()
Api集中管理
const http = uni.$u.http
// post请求，获取菜单
export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)
// get请求，获取菜单，注意：get请求的配置等，都在第二个参数中，详见前面解释
export const getMenu = (data) => http.get('/ebapi/public_api/index', data)
发送请求
import { postMenu, getMenu } from '/config/api.js';
// 发出post，假设需要带上token
postMenu({ custom: { auth: true }}).then(() => {
}).catch(() =>{
})
// await等待，注意与async结合使用
await postMenu({ custom: { auth: true }})
// 假设不需要在响应拦截器中自动弹出的toast，以及不想写catch(如果promise中进行reject，但是却没有catch的话会报错)
postMenu({ custom: { auth: true, toast: false, catch: false }}).then(() => {
})
// get请求
getMenu({ custom: { auth: true }}).then(() => {
}).catch(() =>{
})
// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
uni.$u.http.post('/common/menu', { custom: { auth: true }}).then(() => {
}).catch(() =>{
})
详见：
uViewHttp请求
多端打包发布
小程序打包发布
小程序打包发布.png
H5端相关兼容性开发及打包发布
manifest.json H5 下出现的跨域问题要进行相关配置
"h5" : {
"devServer" : {
"port" : 8000, //端口
"disableHostCheck" : true,
"proxy" : {
//使用代理
"/api" : {
"target" : "http://xxxx.com/xxx",
"changeOrigin" : true,
"pathRewrite" : {
"^/api" : ""
}
}
}
}
}
微信相关api要特有处理
// #ifdef MP-WEIXIN
// 微信条件下分享到朋友圈、群组
wx.showShareMenu({
})
// #endif