uni-app开发微信小程序与h5的一些随手笔记（持续更新）
1. 要想在微信小程序不能再css中使用background-image！（虽然测试是可以的，但是真机的时候有可能出错。uni-app官网也有提及到）
2. 在h5端进行调试的时候发现点击事件不生效，可能原因如下
-
如果是有图片的，有可能是图层之间的问题，给点击的图片添加z-index增大层级即可
3. 将数组变成对象的写法:{....arr}
-
原数组：[{...},{...},{...}]
-
转成对象后：{{...},{...},{...}}
4. 拼接数组：
-
数组与数组之间的拼接：[...arr1,...arr2]
-
元素与数组之间的拼接：['...',...arr]
5.想把一个key值没有规律的对象的某些属性提取出来合成新的数组
-
使用map
-
参考链接：【前端】js中Map的用法_风信子-CSDN博客_前端map
-
实例如下：
async getGoosList() {
let mapObj = new Map();
let testObj = {};
uni.showLoading();
const {
data: res
} = await getGoodsList()
if (res.code === 0) {
this.hotArr=res.data.hot_goods
uni.$u.setProperty(testObj, '0.goods')
testObj['0'].goods = uni.$u.deepClone(res.data.hot_goods);
mapObj.set('0', {
...testObj
})
for (let key in res.data.goods_list) {
const temp = uni.$u.getProperty(res.data.goods_list, key)
this.leftArray.push(temp.name)
mapObj.set(key, temp.sons)
}
this.leftArray = ['热门', ...this.leftArray]
for (const item of mapObj) {
this.rightListArr.push(item[1])
}
}
uni.hideLoading();
this.$nextTick(() => {
this.getElementTop();
});
},6. uni-app中跨域的配置(只存在于h5端)
-
打开manifest.json的源码视图，在其中加入配置项
-
记得每次对配置文件进行更改之后要重启项目！！不然不成功
"h5": {
"devServer": {
"port": 8000, //端口号
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "......", //目标接口域名
"changeOrigin": true,
"secure": false,
"pathRewrite": {
"^/api": ""//重写
}
}
}
}
}-
由于使用了请求拦截，因此还需要配置如下：
//在非h5情况下
// #ifndef H5
config.baseURL = '.....';//服务器ip地址或者域名
// #endif
//在h5情况下
// #ifdef H5
config.baseURL = '/api';
// #endif7.post提交相当于一个表单，关键看数据是否正确提交了
8.uni-app开发h5的注意事项：uni-app的H5版使用注意事项 - DCloud问答
9.打包的时候要把路由模式修改成hash模式，运行路径修改。如果没修改的会出现打包以后发布上去页面找不到
"router":{
"mode":"hash",
"base":"./"
}10. h5打包前的相关配置
-
uni-app开发H5配置，打包注意事项_look_地中海的博客-CSDN博客_uniapp打包h5?
-
uniapp 打包成h5部署到服务器的步骤记录_yehaocheng520的博客-CSDN博客_h5 部署?
11.uni-app开发如何判断运行平台
//获取项目运行的平台
export const getPlatform=()=>{
let platForm=undefined;
// #ifdef APP-PLUS
platForm="APP"
// #endif
// #ifdef H5
platForm="H5"
// #endif
// #ifdef MP-WEIXIN
platForm="MP-WEIXIN"
// #endif
return platForm
}12.全局挂载的使用
1）需要挂载的目标文件：common/common.js，向外暴露出getPlatform方法
//获取项目运行的平台
export const getPlatform=()=>{
let platForm=undefined;
// #ifdef APP-PLUS
platForm="APP"
// #endif
// #ifdef H5
platForm="H5"
// #endif
// #ifdef MP-WEIXIN
platForm="MP-WEIXIN"
// #endif
return platForm
}2）在main.js中进行全局挂载
//引入
import {getPlatform} from './common/common.js';
//全局挂载
Vue.prototype.$getPlatform = getPlatform3）在任意组件中使用（记住不要忘记this.调用，这个this即是Vue的示例对象）
console.log(this.$getPlatform())11.uni-app小程序开发的时候，数据还没加载出来的时候会显示undefined的处理方式
1）数据没到就给他转圈圈、数据到了把圈圈关了
2）v-if判断不显示
3）骨架屏
12.参数拼接：
把对象转换为字符串拼接到url后面_weixin_55869763的博客-CSDN博客
https://blog.csdn.net/weixin_55869763/article/details/115457890
13.js文件中引入另外一个js文件
- 这里举例request.js文件中引入joinUrl.js文件
1）在joinUrl文件中定义如下：
// let data = {
// name: 'haha',
// age: 11
// }
export const joinUrl = (data) => {
// 遍历对象data 然后进行字符串拼接
// 遍历结果 key是属性名 data[key]是值
let urlString = ''
for (let key in data) {
urlString += key + "=" + data[key] + '&'
}
// 因为经过循环字符串最后面会多一个 & 使用substring把最后一个删除
urlString = urlString.substring(0, urlString.length - 1)
return urlString
}2)在request.js文件中引入如下
//引入
import {joinUrl} from '../common/joinUrl.js';//这个目录根据实际而定
//调用
console.log('拼接之后的config.data',joinUrl(config.data))15. 当需要对请求进行统一性处理的时候（这里使用的是uview中封装的请求拦截）
-
举例【1】
1）在请求拦截中的配置，最主要的是if (config?.custom?.auth) 这个判断，即当你在请求数据的时候如果配置项传递的custom.auth为true，那么便会发生相应的请求拦截，具体你要在拦截器中进行什么样的逻辑动作，那你自行定义。custom对象下的属性可以自定义，你定义了什么属性进行什么样的拦截操作，你倒是请求的时传递这个相应的属性即可。
比如这里定义的custom下的属性auth主要是用来判断请求的时候是否需要携带token，当你请求的时候传递的 custom: { auth: ture}，那么就会发生拦截
uni.$u.http.interceptors.request.use((config) => {
config.data = config.data || {}
// let sign=signString+secret
if (config?.custom?.auth) {
const token = uni.getStorageSync('token');
config.header.Authorization = token
}
return config
}, config => {
return Promise.reject(config)
})2）使用
//第一个为params参数，第二个参数为其他配置说明
const res=await getIndex({user_id:'14'},{ custom: { auth: false}})- 举例【2】
if (config?.custom?.sign) {
let secret = 'DKGd35slt5sc48s4q';
config.data = sortKey(config.data) //对参数进行排序
let signString = joinUrl(config.data) //对排序后的参数进行拼接
// let sign=signString+secret
config.header.Authorization = token
}16.客户端发起的每个请求，都需要携带sign参数，服务端根据sign的内容进行相同的参数封装，由此判断传递参数是否遭到恶意篡改。
注意：将除“sign”外的所有参数按key进行字典升序排列，排序后的参数(key=value)用&拼接起来。
1）示例：
let secret = "CFUMAO";//仅为示例，具体值另行交接。
let data = {type:"home",action:"search",time:"1610101123"};
let sign = md5('action=search&type=home&time=1610101123'+secret);2）封装(将对象key值按字典升序之后并以&的形式拼接起来)：
export const joinUrl = (data) => {
// 遍历对象data 然后进行字符串拼接
// 遍历结果 key是属性名 data[key]是值
let urlString = ''
for (let key in data) {
urlString += key + "=" + data[key] + '&'
}
// 因为经过循环字符串最后面会多一个 & 使用substring把最后一个删除
urlString = urlString.substring(0, urlString.length - 1)
return urlString
}
export const sortKey = (arys) => {
//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
var newkey = Object.keys(arys).sort();
//console.log('newkey='+newkey);
var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
for (var i = 0; i < newkey.length; i++) {
//遍历newkey数组
newObj[newkey[i]] = arys[newkey[i]];
//向新创建的对象中按照排好的顺序依次增加键值对
}
return newObj; //返回排好序的新对象
}3）引入md5
- 具体引入步骤参考我的另外一篇文章：
https://blog.csdn.net/weixin_46872121/article/details/122701853https://blog.csdn.net/weixin_46872121/article/details/1227018534）封装sign的并且在发起网络请求的时候一起以data的形式发送给服务器
uni.$u.http.interceptors.request.use((config) => {
config.data = config.data || {}
if (config?.custom?.sign) {
let secret = 'DKGd35slt5sc48s4q';
config.data = sortKey(config.data) //对参数进行排序
let signString = joinUrl(config.data) //对排序后的参数进行拼接
let beforeSign = signString + secret
// console.log('加密前---', beforeSign)
const aftreSign=md5.hex_md5(beforeSign)
// console.log('加密后---', aftreSign)
config.data.sign=aftreSign//将sign数据一同发送到后端
}
return config
}, config => {
return Promise.reject(config)
})18.判断对象是否为空
JSON.stringify(userInfo) != '{}'19.easycom组件规范
传统的vue组件，需要安装、引用、注册三个步骤才能使用组件。easycom将其简化 为一步，只要组件安装在项目的compnents目录下或者uni_modules目录下，并且符合components/组件名称/组件名称.vue目录结构，不用引入、注册、直接在页面中使用。
比如uni-rate组件，它到如下项目之后吗，存放在了目录/components/uni-rate/uni-rate.vue，同时它的组合名称也叫uni-rate，所以这样的组件，不用再script里注册和引用。如下：
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件的使用尤为友好。组件库批量安装，随意使用，自动按需打包。再uni-app中，easycom是自动开启的，不需要手动开启。
如果你的组件名称或者路径不符合easycom得默认规范们可以再pages.json的easycom节点进行个性化设置。详见：uni-app官网
20.tab页面之间跳转传参问题
我们知道，在uni-app中tab页面之间的跳转是无法传递参数的，所以一般我们采用本地存储的方式，比如举例如下：
即当我们想从主页的某些元素中点击跳转到列表页，且需要携带一定的参数的时候，便可以采取以下方式：
1. 给触发事件的元素绑定事件
2.实现
goToListTab(index, name) {
uni.setStorageSync('item-index', index)
uni.setStorageSync('item-name', name)
uni.switchTab({
url: `/pages/list/list`,
success: function(e) {
var page = getCurrentPages()[0]
if (page == undefined || page == null) {
return
}
//h5端不支持使用onLoad()进行刷新，因此需要对其进行条件编译
//#ifdef H5
window.location.reload();
//#endif
// #ifndef H5
page.onLoad()
//#endif
}
});
},起初的时候，我并没有在跳转成功的回调函数中进行获取当前栈页面的操作，发现点击元素1跳转到列表页的时候，我是可以成功获取到保存在本地的参数的；但是当我从列表页返回首页，再次点击元素2（其他元素）的时候，发现无效。因此页面栈的相关知识也是很重要滴！可以参考这个连接getCurrentPages()的使用,（页面刷新） - L某人 - 博客园
3.列表页获取保存在本地的参数数据，并进行相关的业务逻辑操作
this.itemIndex = uni.getStorageSync('item-index')
his.itemName = uni.getStorageSync('item-name')
leftTap(status,e={}) {
let index1 = 0;
let index=0;
switch (this.itemName) {
case '工商注册':
index1 = 1;
break;
case '资质办理':
index1 = 2
break;
case '财税服务':
index1 = 3;
break;
case '知识产权':
index1 = 4
break;
case '认证服务':
index1 = 5
break;
}
if (status) {
//列表页触发的点击
index = e.currentTarget.dataset.index;
this.isClick = true;
} else {
//首页触发的点击
index = index1
this.isClick = false;
}
this.leftIndex = index;
this.scrollInto = `item-${index}`;
},