uniapp 微信小程式總結
uniapp 微信小程式總結
技術棧
- uniapp、高德地圖、簡訊、echarts
注意事項
域名配置
- 圖片資源放置伺服器
過濾方法
性別
/**
* 性別（1：男，2：女）
*/
export function sexTypeToStr(type) {
let str = '';
if (type == 1) {
str = '男';
} else if (type == 2) {
str = '女';
}
return str;
}
複製程式碼金額
/**
* 金額格式化
*/
export function formatPrice(value) {
let val = '';
if (value == '' || value === undefined ||value == null) {
val = '0.00';
} else {
val = Number(value).toFixed(2);
}
return val;
}
複製程式碼格式驗證
/*!
* 正則驗證
*/
export default {
// 正則
empeyReg: /^[ ]*$/g, // 全空格正則
spaceReg: /\s+/g, // 包含空格正則
enReg: /^[a-zA-Z]*$/, // 英文正則
cnReg: /^[\u0391-\uFFE5]+$/, // 中文正則
numberReg: /^[0-9]+$/, // 數字正則
enOrNumReg: /^[0-9a-zA-Z]*$/, // 英文數字組合正則
priceReg: /^[0-9]+([.]{1}[0-9]{1,2})?$/, // 價格正則
negativePriceReg: /^[0-9]+([.]{1}[0-9]{1,2})?$/, // 支援正負數價格正則
telReg: /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/, // 電話正則
mobileReg: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, // 手機正則
emailReg: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/, // 郵箱正則
/**
* 驗證表單是否有效
* @param {string} value 值
* @param {Array} rules 規則列表
* @return {boolean}
*/
valid(rules = []) {
// 判斷是否有設定表單規則
if (!rules.length) {
return {
status: false,
message: '未設定表單規則'
}
}
//----------------------------------------------------------
// 遍歷表單規則
//----------------------------------------------------------
for (let item of rules) {
// 判斷是否有設定表單驗證規則
if (this.isUndefined(item.rules)) {
return {
status: false,
message: '未設定表單驗證規則'
}
}
//----------------------------------------------------------
// 遍歷表單驗證規則
//----------------------------------------------------------
for (let itemRules of item.rules) {
// 如果是NULL、undefined轉字串空
item.value = item.value === 'null' || item.value === undefined ? '' : item.value;
// 驗證值是否全是空格
if (item.value.length >= 1 && this.empeyReg.test(item.value) === true) {
return {
status: false,
message: '不能全部為空格'
};
break;
}
// 如果自定義驗證函式存在，不驗證規則
if (!this.isUndefined(itemRules.validator)) {
const validate = itemRules.validator(itemRules.value, (message) => {
if (!this.isUndefined(message)) {
return {
status: false,
message: message
};
} else {
return {
status: true,
message: '驗證通過'
};
}
});
if (!this.isUndefined(validate) && !validate.status) {
return {
status: validate.status,
message: validate.message
}
break;
}
} else {
// 是否必填
if (!this.isUndefined(itemRules.required) && itemRules.required == true && item.value === '') {
return {
status: false,
message: this.isUndefined(itemRules.message) ? '不能為空' : itemRules.message
}
break;
}
// 長度最小、最大字元範圍
if (!this.isUndefined(itemRules.min) && !this.isUndefined(itemRules.max) && item.value < itemRules.min && item.value > itemRules.max) {
return {
status: false,
message: this.isUndefined(itemRules.message) ? `長度${itemRules.min}到${itemRules.max}位` + itemRules.max : itemRules.message
}
break;
} else if (!this.isUndefined(itemRules.min) && item.value.length < itemRules.min) {
return {
status: false,
message: this.isUndefined(itemRules.message) ? '最小長度不能小於' + itemRules.min : itemRules.message
}
break;
} else if (!this.isUndefined(itemRules.max) && item.value.length > itemRules.max) {
return {
status: false,
message: this.isUndefined(itemRules.message) ? '最大長度不能大於' + itemRules.max : itemRules.message
}
break;
}
// 驗證型別
if (!this.isUndefined(itemRules.type) && item.value !== '') {
// 是否整型數字
if (itemRules.type === 'number') {
console.log(item.value);
const valid = this.isNumber(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '必須是數字' : itemRules.message
}
break;
}
}
// 是否價格格式，不支援負數
if (itemRules.type === 'price') {
const valid = this.isPrice(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '金額格式不對' : itemRules.message
}
break;
}
}
// 是否是電話號碼
if (itemRules.type === 'tel') {
const valid = this.isTel(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '電話號碼格式不正確' : itemRules.message
}
break;
}
}
// 是否是手機號碼
if (itemRules.type === 'mobile') {
const valid = this.isMobile(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '手機號碼格式不正確' : itemRules.message
}
break;
}
}
// 是否是郵箱
if (itemRules.type === 'email') {
const valid = this.isEmail(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '郵箱格式不正確' : itemRules.message
}
break;
}
}
// 是否是身份證號碼
if (itemRules.type === 'IDCard') {
const validate = this.isIdentityCard(item.value);
if (!validate.status) {
return {
status: validate.status,
message: validate.message
}
break;
}
}
// 值兩邊是否有空格
if (itemRules.type === 'trim') {
if (item.value != '' && item.value.slice(0, 1) === ' ' || item.value.slice(-1) === ' ') {
return {
status: false,
message: this.isUndefined(itemRules.message) ? '兩邊不能有空格' : itemRules.message
}
break;
}
}
// 值裡面不能包含空格
if (itemRules.type === 'space') {
if (this.noSpacesReg.test(item.value)) {
return {
status: false,
message: this.isUndefined(itemRules.message) ? '不能包含空格' : itemRules.message
}
break;
}
}
// 是否英文字母
if (itemRules.type === 'en') {
const valid = this.isEN(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '必須是英文字母' : itemRules.message
}
break;
}
}
// 是否中文漢字
if (itemRules.type === 'cn') {
const valid = this.isCN(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '必須是中文漢字' : itemRules.message
}
break;
}
}
// 是否英文數字
if (itemRules.type === 'enOrNum') {
const valid = this.isENOrNum(item.value);
if (!valid) {
return {
status: valid,
message: this.isUndefined(itemRules.message) ? '必須是英文數字組合' : itemRules.message
}
break;
}
}
}
}
}
}
return {
status: true,
message: '通過'
}
},
isUndefined(value) {
return value === undefined;
},
/**
* 是否整型數字
* @param {int} value 值
* @return {boolean}
*/
isNumber(value) {
return this.numberReg.test(value);
},
/**
* 是否價格格式，不支援負數
* @param {string} value 值
* @return {boolean}
*/
isPrice(value) {
return this.priceReg.test(value);
},
/**
* 是否是價格格式，支援正負數
* @param {string} value 值
* @return {boolean}
*/
isNegativePrice(value) {
return negativePriceReg.test(value);
},
/**
* 是否是電話號碼
* @param {string} value 值
* @return {boolean}
*/
isTel(value) {
return this.telReg.test(value);
},
/**
* 是否是手機號碼
* @param {string} value 值
* @return {boolean}
*/
isMobile(value) {
return this.mobileReg.test(value);
},
/**
* 是否是郵箱
* @param {string} value 值
* @return {boolean}
*/
isEmail(value) {
return this.emailReg.test(value);
},
/**
* 是否英文字母
* @param {string} value 值
* @return {boolean}
*/
isEN(value) {
return this.enReg.test(value);
},
/**
* 是否中文漢字
* @param {string} value 值
* @return {boolean}
*/
isCN(value) {
return this.cnReg.test(value);
},
/**
* 是否英文數字組合
* @param {string} value 值
* @return {boolean}
*/
isENOrNum(value) {
return this.enOrNumReg.test(value);
},
/**
* 判斷是否是身份證
* @param {string} code
* @return: {Object}
*/
isIdentityCard(code) {
let list = [];
let result = false;
let msg = '';
const city = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "內蒙古",
21: "遼寧",
22: "吉林",
23: "黑龍江 ",
31: "上海",
32: "江蘇",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山東",
41: "河南",
42: "湖北 ",
43: "湖南",
44: "廣東",
45: "廣西",
46: "海南",
50: "重慶",
51: "四川",
52: "貴州",
53: "雲南",
54: "西藏 ",
61: "陝西",
62: "甘肅",
63: "青海",
64: "寧夏",
65: "新疆",
71: "臺灣",
81: "香港",
82: "澳門",
91: "國外 "
};
if (code != '') {
if (code.length == 18) {
if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
msg = "證件號碼格式錯誤";
} else if (!city[code.substr(0, 2)]) {
msg = "地址編碼錯誤";
} else {
// 18位身份證需要驗證最後一位校驗位
code = code.split('');
// 加權因子
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
// 校驗位
let parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x'];
let sum = 0;
let ai = 0;
let wi = 0;
for (let i = 0; i < 17; i++) {
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
if (parity[sum % 11] != code[17]) {
msg = "證件號碼校驗錯誤";
} else {
result = true;
}
}
} else {
msg = "證件號碼長度不能少於18位";
}
} else {
msg = "證件號碼不能為空";
}
return {
status: result,
message: msg
};
}
};
複製程式碼Toast提示
/*!
* Toast輕提示
*/
export default {
/**
* 顯示提示框
* @param {String} value
* @return {void}
*/
show(value) {
uni.showToast({
title: value,
icon: 'none',
duration: 2000
});
},
/**
* 隱藏提示框
*/
clear() {
uni.hideToast();
},
/**
* 顯示loading
* @param {string, object} option 字串或者物件選項
* @return {void}
*/
showLoading(option) {
if (typeof option === 'string') {
const value = option;
uni.showLoading({
title: value
});
} else {
uni.showLoading(option);
}
},
/**
* 關閉loading
*/
clearLoading() {
uni.hideLoading();
}
};
複製程式碼常用方法
格式化時間戳
/*!
* 常用公共函式
*/
export default {
/*-------------------------------------------------------------------------------------
| 常用函式
|-------------------------------------------------------------------------------------
*/
/**
* 格式化時間戳
* @param {int} times 時間戳
* @param {string} format 格式
* @return {string}
*/
formatTime(times, format = '') {
const today = new Date(times);
const y = today.getFullYear();
const m = (today.getMonth() + 1 < 10) ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
const d = (today.getDate() < 10) ? '0' + today.getDate() : today.getDate();
const h = (today.getHours() < 10) ? '0' + today.getHours() : today.getHours();
const i = (today.getMinutes() < 10) ? '0' + today.getMinutes() : today.getMinutes();
const s = (today.getSeconds() < 10) ? '0' + today.getSeconds() : today.getSeconds();
let time = '';
if (format === '年-月') {
time = y + '年' + m + '月';
} else if (format === 'y-m-d h:i') {
time = y + '-' + m + '-' + d + ' ' + h + ':' + i;
} else if (format == 'y-m-d h:i:s') {
time = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
}else if (format === 'y-m-d') {
time = y + '-' + m + '-' + d;
} else if (format === 'y-m') {
time = y + '-' + m;
} else if (format === 'ymd') {
time = y + '' + m + '' + d;
} else if (format === 'd') {
time = d;
} else if (format === 'h:i') {
time = h + ':' + i;
} else if (format === 'h') {
time = h;
} else if (format === 'y') {
time = y;
} else {
time = y + '-' + m + '-' + d;
}
return time;
},
};
複製程式碼獲取url
/*!
* 常用公共函式
*/
export default {
/**
* 獲取URL引數
* @param {string} paramName 引數
* @return {string}
*/
getParam(paramName) {
const reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)", "i");
if (window.location.hash.indexOf('=') >= 0) {
const params = window.location.hash.split('?');
const r = params[1].match(reg);
if (r != null) return (r[2]); return '';
} else {
if (window.location.search.indexOf('=') >= 0) {
const params = window.location.search.split('?');
const r = params[1].match(reg);
if (r != null) return (r[2]); return '';
} else {
return '';
}
}
},
}
複製程式碼物件按字母排序
/*!
* 常用公共函式
*/
export default {
/**
* 物件按字母排序
* @param {object} obj 引數
* @return {string}
*/
objKeySort(obj) {
// 建立一個新的物件，用於存放排好序新物件
let newkey = Object.keys(obj).sort();
// 建立一個新的物件，用於存放排好序的鍵值對
let newObj = {};
for (var i = 0; i < newkey.length; i++) {
newObj[newkey[i]] = obj[newkey[i]]; //向新建立的物件中按照排好的順序依次增加鍵值對
}
return newObj;
},
}
複製程式碼時間格式化
//格式化時間格式
export const formatNumber = n => {
//數字轉字串
n = n.toString();
//判斷該數字是否為倆位數,如果不是就在前面加0(格式化)
return n[1] ? n : "0" + n;
};
//獲取當前年月日時分秒(格式化)
export const formatTime = date => {
const year = date.getFullYear(); //獲取年
const month = date.getMonth() + 1; //獲取月
const day = date.getDate(); //獲取日
const hour = date.getHours(); //獲取時
const minute = date.getMinutes(); //獲取分
const second = date.getSeconds(); //獲取秒
//格式化
return (
[year, month, day].map(formatNumber).join("-") +
" " +
[hour, minute, second].map(formatNumber).join(":")
);
};
複製程式碼操作本地Storage(切換微訊號,隔離的)
/*!
* 本地儲存
*/
export default {
/**
* 寫入Storage
* @param {String} key 值名稱
* @param {String} value 值
* @return {void}
*/
set(key, value) {
uni.setStorageSync(key, value);
},
/**
* 獲取Storage
* @param {String} key 值名稱
* @return {String}
*/
get(key) {
return uni.getStorageSync(key, key);
},
/**
* 刪除Storage
* @param {String} key 值名稱
* @return {void}
*/
remove(key) {
uni.removeStorageSync(key, key);
}
};
複製程式碼資料請求(倆種)
uni-request模組
基本配置
import uniRequest from 'uni-request';
uniRequest.defaults.baseURL = 'https://dianligongsi001.hzsandao.com/index/apiwx';// api的base_url
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 請求攔截
uniRequest.interceptors.request.use(
request => {
//配置基本資訊
return request;
},
err => {
console.log('請求失敗');
return Promise.reject(err);
});
// 響應攔截
uniRequest.interceptors.response.use(function(response) {
console.log('返回進入攔截成功')
return Promise.resolve(response);
}, function(error) {
console.log('返回進入攔截失敗')
return Promise.reject(error);
});
export default uniRequest;
複製程式碼請求方法配置
import request from '../utils/request.js';
//[post]請求
export function Post(url,data) {
return request({
url,
data,
method: 'post',
})
}
複製程式碼flyio模組
配置(直接入口掛載在原型上)
/*!
* HTTP請求
*/
// #ifdef APP-PLUS
import Fly from 'flyio/dist/npm/wx'
// #endif
// #ifdef MP-WEIXIN
import Fly from 'flyio/dist/npm/wx'
// #endif
// #ifdef H5
import Fly from 'flyio/dist/npm/fly'
// #endif
import Config from '@/config';
import Storage from '@/utils/storage'; // 本地儲存
import Toast from '@/utils/toast';
/*-------------------------------------------------------------------------------------
| 初始化
|-------------------------------------------------------------------------------------
*/
let baseURL = '';
const request = new Fly();
// 環境判斷
switch (process.env.NODE_ENV) {
case 'development':
baseURL = Config.devURL;
break;
case 'production':
baseURL = Config.proURL;
break;
default:
}
// 請求前攔截器
request.interceptors.request.use((request) => {
request.headers = {
'content-type': 'application/x-www-form-urlencoded'
}
return request;
});
// 響應前攔截器
request.interceptors.response.use((request) => {
const res = JSON.parse(request.data);
if (res.status != 200) {
Toast.show(res.message);
}
return request;
})
export default {
/**
* get方法
* @param {string} url // 介面地址
* @param {object} params // 引數物件
* @return {Promise}
*/
get(url = '', params = {}) {
// 設定需要攜帶的引數
const initParams = {
token: Storage.get('token') == null ? '' : Storage.get('token')
};
// 合併引數
const newParams = Object.assign(params, initParams);
// 返回響應資料
return new Promise((resolve, reject) => {
request.get(baseURL + url, newParams)
.then(res => {
const data = JSON.parse(res.data);
resolve(data);
})
.catch(err => {
reject(err);
});
});
},
/**
* post方法
* @param {string} url // 介面地址
* @param {object} params // 引數物件
* @return {Promise}
*/
post(url = '', params = {}) {
// 設定需要攜帶的引數
const initParams = {
token: Storage.get('token') == null ? '' : Storage.get('token')
};
// 合併引數
const newParams = Object.assign(params, initParams);
// 返回響應資料
return new Promise((resolve, reject) => {
request.post(baseURL + url, newParams)
.then(res => {
const data = JSON.parse(res.data);
resolve(data);
})
.catch(err => {
reject(err);
});
});
},
};
複製程式碼分包配置
"pages": [
//pages陣列中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
//主包
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "xxxx"
}
},
],
"subPackages":[
{
"root": "xx/", //分包---xxx
"pages":[
{
"path": "xxx/xxx",
"style": {
"navigationBarTitleText": "xxxx",
"usingComponents": {
//.....UI框架元件引入
}
}
}
]
},
]
複製程式碼全域性樣式配置
"globalStyle": {
"navigationBarTextStyle": "#fff",
"navigationBarTitleText": "xxxx",
"navigationBarBackgroundColor": "#006469",
"backgroundColor": "#F8F8F8",
"usingComponents": {
//.....UI框架元件引入
}
}
複製程式碼許可權控制
位置
"permission":{
"scope.userLocation":{
"desc":"你的位置資訊將用於小程式位置介面的"//小程式呼叫位置資訊許可權
}
}
複製程式碼微信獲取openid
// var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + loginRes.code + '&grant_type=authorization_code';
複製程式碼頁面傳值
- 周期函式獲取
//main
uni.navigateTo({
url:'/xxx/xxx?xxx=xx'
})
//app
onLoad(option){
//option.xxx
}
複製程式碼- 設定上一頁變數或者呼叫上一頁方法
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //當前頁面
var prevPage = pages[pages.length - 2]; //上一個頁面
prevPage.$vm.getHistory();
複製程式碼地圖
配置
import amap from '@/utils/amap-wx.js';
data(){
return {
amapPlugin:null,
key:'xxxx',
}
}
onLoad(){
//配置地圖的key
this.amapPlugin = new amap.AMapWX({
key: this.key
});
}
複製程式碼元件配置
<!--
* map 用到的屬性
* @param width map寬度
* @param height map高度
* @param latitude 中心緯度
* @param longitude 中心經度
* @param scale 縮放級別，取值範圍為5-18
* @param markers 標記點
* @param show-location 顯示帶有方向的當前定位點
* @param markertap 點選標記點時觸發
-->
<map
style="width: 100%; height: 40vh;"
id="map4select"
:latitude="latitude"
:longitude="longitude"
scale="16"
show-location="true"
@markertap=markertap
@regionchange="regionchange">
<cover-image class="cover-image" bindtap="my_location" src="xxxx" />
</map>
複製程式碼獲取周邊資料
that.amapPlugin.getRegeo({
location: 'xxx,xxx',
success: function(data){
//....
}
})
複製程式碼返回最近的20的位置資訊
this.amapPlugin.getPoiAround({
location:'xxx,xxx',//指定搜尋座標周邊poi
success: function(data){
//成功回撥
// data.poisData;
//設定當前座標（獲取當前的詳細資料）
},
fail: function(info){
//失敗回撥
// console.log(info)
}
})
複製程式碼關鍵字搜尋
this.amapPlugin.getInputtips({
keywords :keywords,//關鍵詞
city:'0571',//限制省
citylimit:true,//限制省
success: function(data){
// // console.log(data)
}
})
複製程式碼獲取當前的詳細資訊
that.amapPlugin.getRegeo({
location: 'xxx,xxx',
success: function(data){
//成功回撥
},
fail: function(info){
//失敗回撥
// console.log(info)
}
})
複製程式碼拖動地圖事件
regionchange(e){
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
var that = this;
this.mapCtx = uni.createMapContext("map4select");
this.mapCtx.getCenterLocation({
type: 'gcj02',
success: function (res) {
that.longitude=res.longitude;
that.latitude=res.latitude;
}
})
this.getPoiAround();//定位當前的周邊資料
}
}
複製程式碼獲取當前位置資料
uni.getLocation({
type: 'gcj02',//標準
success: function (res) {
// console.log(res,"nimei")
// that.longitude=res.longitude;
// that.latitude=res.latitude;
},
fail:function(info){
// console.log(info)
},
complete:function(){
// uni.hideLoading();
}
});
複製程式碼改變地圖位置
-
改變data的經緯度
-
利用方法
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude:'xxx',
longitude:'xxx',
}]
})
複製程式碼上傳九張圖片
//調起圖片
sendphoto(){
let self=this;
uni.chooseImage({
count: 9,
sizeType: ['compressed'],//// sizeType: original 原圖，compressed 壓縮圖，預設二者都有
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作為img標籤的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths;
var successUp = 0; //成功
var failUp = 0; //失敗
var length = res.tempFilePaths.length; //總數
var count = 0; //第幾張
self.uploadOneByOne(res.tempFilePaths,successUp,failUp,count,length)
}
})
}
/**
* 採用遞迴的方式上傳多張
*/
uploadOneByOne(imgPaths,successUp, failUp, count, length){
var that = this;
uni.showLoading({
title: '正在上傳第'+(count+1)+'張',
})
uni.uploadFile({
url: 'xxxx', //僅為示例，非真實的介面地址
filePath: imgPaths[count],
name: 'photo',//示例，使用順序給檔案命名json名
header: {
"Content-Type": "multipart/form-data",
'accept': 'application/json',
},
success:function(e){
var data=JSON.parse(e.data);
that.imgList.push(data.url);
console.log(that)
successUp++;//成功+1
},
fail:function(e){
failUp++;//失敗+1
},
complete:function(e){
count++;//下一張
if(count == length){
//上傳完畢，作一下提示
console.log('上傳成功' + successUp + ',' + '失敗' + failUp);
uni.showToast({
title: '上傳成功' + successUp,
icon: 'success',
duration: 2000
})
}else{
//遞迴呼叫，上傳下一張
setTimeout(function() {
that.uploadOneByOne(imgPaths, successUp, failUp, count, length);
}, 200);
console.log('正在上傳第' + count + '張');
}
}
})
}
複製程式碼