小程序page.json全局配置

{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/workbench/workbench","style": {// "navigationBarTitleText": "工作臺", //下面的buttons內容會將其覆蓋"app-plus": { //App端擴展配置"titleNView": { //原生導航欄配置參數"autoBackButton": true,"buttons": [ //原生標題欄按鈕配置,點擊事件可通過頁面的 onNavigationBarButtonTap 函數進行監聽。如：top導航欄后退按鈕。然后在pages/workbench/workbench點擊事件（與data和onload同級）：{"type": "none", // 需通過 text 屬性設置按鈕上顯示的內容、通過 fontSrc 屬性設置使用的字體庫。"text": "數字婺城","float": "left","id": "test1","fontSize":"16px" //標題的字體大小},{"type": "back", // 使用 type 值設置按鈕的樣式時，會忽略 fontSrc 和 text 屬性。"float": "left","id": "test0"}],"searchInput": { // 在vue/nvue頁面中可通過onNavigationBarSearchInputChanged事件監聽搜索框輸入內容變化"autoFocus": true,// "borderRadius": "10upx","borderRadius": "6px", //輸入框圓角"backgroundColor": "#F5F4F4","placeholder": "請輸入搜索內容"// "disabled": true //disable時點擊輸入框不置焦，可以跳到新頁面搜索 }}}}},{"path": "pages/login/login",// "style": {// "navigationBarTitleText": "數字婺城",// "enablePullDownRefresh": false// }"style": {"navigationBarTitleText": "數字婺城","app-plus": { //App端擴展配置"scrollIndicator": "none","titleNView": { //原生導航欄配置參數"homeButton": true,"autoBackButton": true, // false,取消pages頁面的默認返回按鈕。自定義返回按鈕的樣式// 當autoBackButton設置為true時生效。 通過如下button中的type屬性可自定義返回按鈕樣式，如圖標大小、紅點、角標、標題等。"buttons": [ //原生標題欄按鈕配置,{"type": "home", // 使用 type 值設置按鈕的樣式時，會忽略 fontSrc 和 text 屬性。"float": "left","id": "test0"}// {// "type": "none",// "text": "自定義",// "float": "right",// "id": "test1"// },// {// "type": "none",// "text": "\u2708",// "float": "right",// "id": "test2"// }]// "buttons": [{ //原生標題欄按鈕配置,// "type": "none",// "text": "\u2716",// "float": "left",// "fontSrc": "/static/uni.ttf",// "fontSize": "22px"// }]// 原生導航欄自定義按鈕帶紅點和角標// ,"buttons": [{// "text": "消息",// "fontSize": "14",// "redDot": true// },// {// "text": "關注",// "fontSize": "14",// "badgeText": "12"// }// ]// 原生導航欄自定義按鈕帶下拉選擇（城市選擇）// "buttons": [{// "text": "北京市",// "fontSize": "14",// "select": true,// "width": "auto"// }]// 帶搜索// "searchInput": {// "autoFocus": true,// // "borderRadius": "10upx",// "borderRadius": "6px", //輸入框圓角// "backgroundColor": "#F5F4F4",// "placeholder": "請輸入搜索內容"// // "disabled": true //disable時點擊輸入框不置焦，可以跳到新頁面搜索// }// "type": "transparent", //配置原生導航欄的透明漸變:頁面剛載入時沒有導航標題，頁面內容通頂到狀態欄里，頁面向下滾動后標題欄漸變出現。// "bounce": "none", //關閉窗口回彈效果// "backgroundImage": "/static/logo.png", //設置背景圖 }}}},{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": { // 全局導航欄樣式設置"navigationBarBackgroundColor": "#007AFF", // 導航欄背景顏色（同狀態欄背景色）"navigationBarTextStyle": "white", // 導航欄標題顏色及狀態欄前景顏色，僅支持 black/white"navigationBarTitleText": "數字婺城", // 導航欄標題文字內容"backgroundColor": "#F8F8F8"},"tabBar": {"color": "#aeafb1", // 表示tabBar item項中文字默認的顏色"selectedColor": "#004de8", // 表示tabBar item項中文字選中的顏色"borderStyle": "black", // 表示tabBar 上邊框的顏色，目前只支持 black/white"backgroundColor": "#ffffff", // 表示 tabBar 的背景顏色"height": "80px", // tabbar的高"fontSize": "16px", // 文字大小"iconWidth": "35px", // 圖標寬帶"spacing": "3px", // 圖標和文字之間的間距"list": [{"pagePath": "pages/information/information", // 表示第一tab項的頁面路徑"iconPath": "static/logo.png", // 表示當前 tab 未選中時所顯示的圖標路徑"selectedIconPath": "static/logo.png", // 表示當前 tab 選中時所顯示的圖標文件路徑"text": "消息" //菜單文字},{"pagePath": "pages/login/login","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "待辦"},{"pagePath": "pages/workbench/workbench","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "工作臺"},{"pagePath": "pages/addressBook/addressBook","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "通訊錄"},{"pagePath": "pages/mine/mine","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "我的"}]} }

某個頁面

<template><view>hi,{{this.$store.state.inputSearchValue}}<view class="indeximg"><!-- <canvas class="relative" :style="{width: fullHeight}" canvas-id="firstCanvas"></canvas> --><!-- <canvas style="width: 99.8%;height: 450px; border: solid 1rpx #aaaaff; " canvas-id="firstCanvas"></canvas> --><canvas class="relative" :style="{height:this.$store.state.fullHeight+'px',width:this.$store.state.fullWidth+'px',border: '1px red solid'}" canvas-id="firstCanvas">{{this.$store.state.fullHeight}}{{this.$store.state.fullWidth}}</canvas></view></view> </template><script>export default {data() {return {};},// onShow() {// uni.getSystemInfo({// success: function (res) {// console.log("屏幕寬度："+res.screenWidth);// console.log("屏幕高度："+res.screenHeight);// console.log("可使用窗口寬度："+res.windowWidth);// console.log("可使用窗口高度："+res.windowHeight);// }// });// },methods:{back() { //top導航欄 后退轉跳頁面uni.switchTab({ // 代碼跳轉到 tabbar 頁面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator組件跳轉時必須設置open-type="switchTab"url: "/pages/login/login"})},cavansChange(){}},mounted() {const that = this;let newHeight = '';let newWidth = '';uni.getSystemInfo({success: function (res) {console.log('res',res)let newHeight = that.fullHeight ="height:" + res.windowHeight + "px";let newWidth = that.fullWidth ="Width:" + res.windowWidth + "px";newHeight = newHeight;newWidth = newWidth;console.log('---------------newHeight',newHeight);console.log('---------------newWidth',newWidth);that.$store.commit('getHeight',newHeight);that.$store.commit('getWidth',newWidth);}});},onNavigationBarButtonTap(e) { // 監聽原生標題欄按鈕點擊事件，參數為Object; //top導航欄 后退按鈕事件console.log("success") this.back();},onNavigationBarSearchInputChanged(e) { //監聽原生標題欄搜索輸入框輸入內容變化事件; //top導航欄 inputSearch按鈕事件let text = e.text; // 為搜索框中輸入的內容// console.log(text)// this.$store.commit('changeInputSearchValue', text);this.$store.dispatch('getInputSearchValue', text);}} </script><style lang="stylus"></style>

store/index.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {get UserToken() {return JSON.parse(sessionStorage.getItem('UserToken'));},set UserToken(UserToken) {if (UserToken) {return sessionStorage.setItem('UserToken', JSON.stringify(UserToken))} else {return sessionStorage.removeItem('UserToken')}},userInfo: "yy", // yhr testtitle: 'input--yhr',inputValue: '',userInfos:{username:'AAA',password:'BBB'},inputSearchValue:'',fullHeight:'', //畫布屏幕高度fullWidth:'', //畫布屏幕寬度},getters:{//相當于computedgetHeight(state){return state.fullHeight;},},mutations: { //相當于methodsLOGIN_IN(state, UserToken) {state.UserToken = UserToken;},LOGIN_OUT(state) {state.UserToken = null;},changeInfo(state, newName) {// console.log('state,newName', state, newName);state.userInfo = newName},changeTitle(state, newtitle) {// console.log('state,newtitle', state, newtitle);state.title = newtitle},changeInputSearchValue(state, newValue){ //工作臺，top導航 搜索欄// console.log('state,newValue', state, newValue);state.inputSearchValue = newValue},// 設置畫布高寬getHeight(state, newHeight){state.fullHeight = newHeightconsole.log('state.fullHeight', state.fullHeight);},// getWidth(state, newWidth){state.fullWidth = newWidthconsole.log('state.fullWidth', state.fullWidth);}// 獲取用戶信息// getUserInfo(state,UserInfo){// state.userInfos.username = UserInfo.username// state.userInfos.password = UserInfo.password// }},// 修改state中的全局數據的間接接口，可以為異步函數，通過調用mutations中的函數實現對state的修改actions: { // 使用actions，通過mutations更改state的值getNewName(context, data) { //同上注釋，data為要變化的形參context.commit('changeInfo', data)},// 或：用到context對象的commit屬性// getNewName({// commit// }, data) {// commit('changeInfo', data)// }getInputSearchValue(context, data){context.commit('changeInputSearchValue', data)}} })

utils/config.js

import store from '@/store/index' //項目域名地址 let baseUrl; let orginUrl; if (process.env.NODE_ENV === "development") { //開發環境下的地址// orginUrl = "http://192.168.1.189:9001";// orginUrl = "http://192.168.1.168:8881";// baseUrl = orginUrl;orginUrl = "https://dfov-intyyte-ayl.yy.gov.cn/mhypi";baseUrl = orginUrl;} else { //生產環境下的地址orginUrl = 'https://dffov-ifffate.ffch.gov.cn/api/';baseUrl = orginUrl; }export { baseUrl }; export { orginUrl };

utils/pucblic.js

/*** 校驗空*/ export function isEmptyValue(val) {if (val == '' || val == null || val == undefined) {return true;}return false }/*** 校驗空并返回提示信息*/ export function isEmptyValueTips(val, msg) {if (isEmptyValue(val)) {showToastMsg(msg);return true;}return false; }/*** 校驗空并返回制定的格式*/ export function isEmptyValueFormat(val, fmt) {if (isEmptyValue(val)) {return fmt;}return val; }/*** 提示信息*/ export function showToastMsg(msg) {uni.showToast({icon: 'none',title: msg,}); }/*** 獲取url指定的參數* @param {Object} name*/ export function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象var r = window.location.search.substr(1).match(reg); //匹配目標參數if (r != null) return decodeURI(r[2]);return null; //返回參數值 }/*** 獲取當前日期及后 num -1 天 共num天* @param {Object} num*/ export function funDate(num){ let weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];let dateList = new Array();let date = new Date();date.setDate(date.getDate());for(let i=0;i<num;i++){let year = date.getFullYear();let month = (date.getMonth()+1)>=10?date.getMonth()+1:'0'+(date.getMonth()+1);let day = date.getDate()>=10?date.getDate():'0'+date.getDate();let dateTemp = year+'-'+month+'-'+day;let weekTemp = weeks[date.getDay()];let obj = {label: dateTemp+' '+weekTemp,value: dateTemp}dateList.push(obj);date.setDate(date.getDate() + 1);}return dateList; }/*** 時間格式話*/ export function FormatDate2(date) {date = new Date(date);var o = {year:date.getFullYear(),month: date.getMonth() + 1, //月份 day: date.getDate(), //日 hour: date.getHours(), //小時 minutes: date.getMinutes(), //分 quarter: Math.floor((date.getMonth() + 3) / 3), //季度 };return o; } export function FormatDate(date, fmt) {//處理iphone系統小程序不支持2020-01-01格式時間的格式化問題// date = date.replace(/-/g, "/");date = new Date(date);var o = {"M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "h+": date.getHours(), //小時 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt; } /*** 計算兩個經緯度之間的距離*/ export function getDistance(latFrom, lngFrom, latTo, lngTo) {latFrom = latFrom || 0;lngFrom = lngFrom || 0;latTo = latTo || 0;lngTo = lngTo || 0;var radLatFrom = latFrom * Math.PI / 180.0;var radLatTo = latTo * Math.PI / 180.0;var a = radLatFrom - radLatTo;var b = lngFrom * Math.PI / 180.0 - lngTo * Math.PI / 180.0;var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2)));distance = distance * 6378136.49;distance = Math.round(distance * 10000) / 10000;return parseFloat(distance.toFixed(0)) }/*** 判斷經緯度是否超出中國境內*/ export function isLocationOutOfChina(latitude, longitude) {if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)return true;return false; }/*** 將百度坐標轉為GCJ-02(火星坐標):*/ export function transformFromBaiduToGCJ(latitude, longitude) {var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0;var x = longitude - 0.0065;var y = latitude - 0.006;var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);var a_latitude = z * Math.sin(theta);var a_longitude = z * Math.cos(theta);return { latitude: a_latitude, longitude: a_longitude }; }/*** 將GCJ-02(火星坐標)轉為百度坐標:*/ export function transformFromGCJToBaidu(latitude, longitude) { var pi = 3.14159265358979324 * 3000.0 / 180.0;var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi);var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi);var a_latitude = (z * Math.sin(theta) + 0.006);var a_longitude = (z * Math.cos(theta) + 0.0065);return { latitude: a_latitude, longitude: a_longitude }; }/*** 將WGS-84(國際標準)轉為GCJ-02(火星坐標):*/ export function transformFromWGSToGCJ(latitude, longitude) {var lat = "";var lon = "";var ee = 0.00669342162296594323;var a = 6378245.0;var pi = 3.14159265358979324;if (isLocationOutOfChina(latitude, longitude)) {lat = latitude;lon = longitude;} else {var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0);var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0);var radLat = latitude / 180.0 * pi;var magic = Math.sin(radLat);magic = 1 - ee * magic * magic;var sqrtMagic = Math.sqrt(magic);adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);latitude = latitude + adjustLat;longitude = longitude + adjustLon;}return {latitude: latitude,longitude: longitude};}export function transformLatWithXY(x, y) {var pi = 3.14159265358979324;var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;return lat; }export function transformLonWithXY(x, y) {var pi = 3.14159265358979324;var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;return lon; }//時間格式轉換 export function timeFormat(time) {let date = time.split('-')let year = date[0]let month = date[1].replace(/\b(0+)/gi,"")return year+'年'+month+'月'} //浙里辦頁面埋點 export function zlbMaData(){const sUserAgent = window.navigator.userAgent.toLowerCase();const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里辦APPconst bIsAlipayMini = sUserAgent.indexOf("alipay") > -1; //支付寶let longLat = JSON.parse(sessionStorage.getItem('longLat'))let userType = sessionStorage.getItem('userType')if(bIsDtDreamApp){if(longLat && userType){// 單頁應用 或 “單個頁面”需異步補充 PV 日志參數還需進行如下埋點：aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-waiting', 'MAN'] }); // 單頁應用路由切換后 或 在異步獲取到 pv 日志所需的參數后再執行 sendPV：aplus_queue.push({ 'action':'aplus.sendPV', 'arguments':[{ is_auto: false }, {miniAppId:'2001836403'},{miniAppName:'永康民情通'},{long:longLat.longitude},{lat:longLat.latitude},{userType:userType}] })}} }

utils/request.js

/*** 網絡請求*/ import {isEmptyValue, showToastMsg} from './public.js'; import { baseUrl } from './config'; import store from '@/store/index'export function request (options) {return new Promise((resolve, reject) => {//獲取登錄用戶信息let UserToken = store.state.UserToken;// 獲取tokenlet token = '';if(!isEmptyValue(UserToken)){token = UserToken;}//設置請求headerlet header = {appCode: 'SZJH',Accept: 'application/json',token: token,}//遮罩uni.showLoading({title: '加載中……',mask: true //是否顯示透明蒙層，防止觸摸穿透，默認: false})let method = options.method == 'GET'?'GET':'POST';let data = isEmptyValue(options.data)? '': options.data;uni.request({url: baseUrl + options.url,method: method,data: data,timeout: 30000,withCredentials: true,header: header,success: (res) => {uni.showModal({title: '提示11111',content: JSON.stringify(res),success: function (res) {if (res.confirm) {console.log('用戶點擊確定');} else if (res.cancel) {console.log('用戶點擊取消');}}});let code = res.data.code;let msg = res.data.msg;if(code == '200'){resolve(res.data);}else if(code == '403'){uni.reLaunch({url: '/pages/login/login'})}else{showToastMsg(res.data.msg);}},fail: (err) => {uni.showModal({title: '提示22222',content: JSON.stringify(err),success: function (res) {if (res.confirm) {console.log('用戶點擊確定');} else if (res.cancel) {console.log('用戶點擊取消');}}});reject(err);showToastMsg(err);},complete: () => {uni.hideLoading();}})}) }

總結

以上是生活随笔為你收集整理的学习uni-app记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。