uniapp开发微信小程序项目总结
最近刚完成一个项目，项目不大，但是设计支付等功能，在这里进行记录一下，以便自己随时可以回顾
一、微信小程序
1、跳转到一个页面时想关闭之前的叠加的页面栈
最初我的做法是直接使用页面卸载，但是我发现用户体验度不是很好，会有很明显的闪动效果，而且因为我的项目登录方式有游客方式不是必登录，不登录的情况下也要能看到这个页面，所以就不能使用onShow这个方法了，但是从上一个页面跳回时还要能刷新更新一下数据。
onUnload(){
uni.navigateTo({
url:'要跳转的页面'
})
}
后来百度了一下，找到了一种写法，感觉效果要好些，就是在跳转的时候调用一下跳转的页面 你想要刷新的方法
realodPage() {
let pages = getCurrentPages(); //获取当前页面
let beforePage = pages[pages.length - 2] //获取上一个页面的实例
//1、调用上一个页面onLoad
beforePage.onLoad()
//2、调用上一个页面方法
// beforePage.fun()
// uni.navigateBack({
// delta: 0
// })
},
onUnload(){
this.realodPage()
}
2、开启订阅号
uni.getSetting({
withSubscriptions: true,
success(res) {
if (!res.subscriptionsSetting.mainSwitch) {
uni.openSetting({
success(res) {
}
})
} else {
uni.requestSubscribeMessage({
tmplIds: [‘模版Id’],
success(res) {
// console.log('requestSubscribeMessage 订阅信息', res);
if (res[paymodelId] ==
"accept") { // 用户点击确定后
} else {
// console.log('拒绝，不会再弹出弹框 只能去设置页膝盖');
uni.showModal({
title: '您未开启消息订阅',
content: '为了给您提供更好的服务，请您授权消息订阅',
success: res2 => {
if (res2.confirm) {
uni.openSetting({
success(res) {
// console.log('打开设置页', res.authSetting);
}
})
} else {
// console.log('决绝')
}
}
})
}
},
fail(errMessage) {
// console.log("订阅消息 失败 ", errMessage);
},
complete(errMessage) {
// console.log("成功 失败都执行 ", errMessage);
that.buyClick()
}
})
}
},
})
3、百度地图经纬度转换
这个项目中用到地图导航，后管是用地图获取经纬度传到后端，后端再通过接口传到小程序端的，但是我使用的是百度地图，微信小程序用的腾讯地图，所以经纬度上会有差别导致地址不准所以需要转换一下，下面是我找到的转换方法
借鉴：https://blog.csdn.net/weixin_43311271/article/details/139468547
1.百度经纬度转换成腾讯/高德地图经纬度
function bMapTransQQMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs,
lat: lats
}
}
2、腾讯/高德地图经纬度转换成百度经纬度
function qqMapTransBMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng;
let y = lat;
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta) + 0.0065;
let lats = z * Math.sin(theta) + 0.006;
return {
lng: lngs,
lat: lats
}
}
4、左滑删除功能
<view class="list">
<view v-for="(item, index) in collectList" :key="index">
<movable-area class="movable-area" v-if="show">
<movable-view class="movable-view" direction="horizontal" out-of-bounds="true" damping="50" friction="4" inertia="true"
:x="movableX"
>
<view class="p-tb-30" style="position: relative;width: calc(100% - 80px);" @click="detailClick(item)">
<view class="row collect m-lr-30" >
<view class="collect-left">
<image :src="item.ticketImage" mode="aspectFill" style="width:225rpx;height:180rpx;"></image>
</view>
<view class="collect-right">
<view class="f30 text-two">{{item.ticketName}}</view>
<view class="label m-t-30">活动</view>
</view>
</view>
<!-- <image src="../../static/delete.png" mode="aspectFit" class="delete-img" v-if="item.type == 1"></image> -->
<image src="../../static/yishixiao.png" mode="aspectFit" class="delete-img" v-if="item.type == 1"></image>
</view>
<view class="delete-btn" @click="delData(item)">删除</view>
</movable-view>
</movable-area>
</view>
</view>
js
data(){
return{
// 设置开始的位置
movableX:0,
startX: 0,
startY: 0,
show:true,
}
},
delData(item){
this.movableX = -80
let params = {
favoriteId:item.favoriteId,
userId:uni.getStorageSync('userId'),
}
getCollectCancel(params).then(res => {
if(res.data.code === 200){
this.movableX = 0
this.show = false
this.getData()
uni.showToast({
title: '删除成功',
icon: 'success',
})
}
})
},
css
.movable-area {
width: 93%;
height: 90px;
overflow: hidden;
padding: 30rpx 0;
border-bottom: 1px solid #f1f1f1;
border-radius: 15rpx;
margin:auto;
margin-top: 30rpx;
box-shadow: 5rpx 5rpx 20rpx #cdcdcd;
}
.movable-view {
width: calc(100% + 80px); /* 增加额外的宽度用于显示删除按钮 */
height: 90px;
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: relative;
left: 0px; /* 默认隐藏删除按钮 */
}
.item-content {
width: 100%;
padding-left: 20px;
background-color: #fff;
}
.delete-btn {
width: 70px;
height: 90px;
line-height: 90px;
color: white;
background-color: red;
text-align: center;
padding: 30rpx 0;
}
5、传参参数过长导致丢失问题
方式一：
A页面
uni.navigateTo({
url: `/pages/index/infom/detail?url=${encodeURIComponent(JSON.stringify(item.location))}`,
})
B页面
onLoad(item) {
// 传入需要跳转的链接 使用web-view标签进行跳转
// this.url = decodeURIComponent(item.url)
if (item.url) {
this.urlLink = JSON.parse(decodeURIComponent(item.url))
}
}
方式二：(其实这种方式我没用明白，地址我已经获取到了，但是一拿出渲染到页面就不行了，目前还不知什么原因，所以亲测第一种方式可)
A页面
uni.navigateTo({
url: `/pages/index/infom/detail?url=${encodeURIComponent(JSON.stringify(item.location))}`,
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('todetailData', { data: item.location })
}
})
B页面
const eventChannel = this.getOpenerEventChannel();
// 监听todetailData事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('todetailData',function(data){
console.log('详情数据',data)
this.urlLink = decodeURIComponent(data.data)
console.log('this.urlLink',this.urlLink)
})
6、项目前端js代码混淆加密
写这个项目的时候，领导提了一个要求，为了代码安全，让给项目做一下代码加密。
之后我就开始百度了，刚开始研究的时候一头雾水，百度找实现方法也是看的迷迷糊糊的，今天才算是研究明白，研究明白之后才发现其实挺简单的，我用的是 javascript-obfuscator 插件实现的，还有一种 terser-webpack-plugin，但是我没用明白，有看会的朋友可以留言替我解惑一下
首先是安装 javascript-obfuscator
当前项目安装（这里我用pnpm安装一直报错安装不下来，不知道为啥，后来换了npm就安装下来了，yarn没有试）
yarn add javascript-obfuscator
#
npm install javascript-obfuscator
全局安装
npm install javascript-obfuscator -g
当前项目安装使用方法
npx javascript-obfuscator ./path_to_input_dir --output ./path_to_output_dir
// 混淆示例
先编译成小程序源码，比如uniapp编译后的dev代码位于/yourproject/dist/dev/mp-weixin
进入项目根目录 cd /yourproject/dist/dev/
执行混淆如下
npx javascript-obfuscator ./mp-weixin --output ./mp-weixin
全局使用方法
javascript-obfuscator ./path_to_input_dir --output ./path_to_output_dir
注意：
我使用 npx javascript-obfuscator ./mp-weixin --output ./mp-weixin 对整个项目进行混淆加密之后，项目就起不起来了，所以小程序包内的文件common文件，app.js不能进行混淆加密，然后就可能麻烦点一个一个文件进行混淆加密了
下面介绍一种相对方面的方式，但是对于我的项目而言稍微有点缺陷，就是有的文件混淆不到
借鉴:https://blog.csdn.net/qq_40358970/article/details/112952264
我是在跟unpackage同等级的建了一个code-obfuscation文件夹
index.js
// 检索的相对文件夹
const relativePath = '../unpackage/dist/dev/mp-weixin'
// 不需要混淆的js或文件夹
const exitFile = ['uni_modules', 'index.js', 'app.js', 'common']
var fs = require('fs')
var process = require('child_process');
var readDir = fs.readdirSync(relativePath);
// 需要存在的js
const czFile = []
var filePath = relativePath
var arr = new Array()
readFile(readDir, filePath)
// 读取相对路径下的所有文件
function readFile(readDir, filePath) {
if (readDir.length > 0) {
for (var i = 0; i < readDir.length; i++) {
scannerFile(readDir[i], filePath)
}
}
}
// 扫描文件进行检索出js文件进行混淆
function scannerFile(file, filePath) {
console.log("file-----" + file);
var readdirpath = ""
if (filePath == './') {
readdirpath = filePath + file
} else {
readdirpath = filePath + "/" + file
}
if (exitFile.indexOf(file) < 0) {
console.log('-->Start entering FS');
fs.stat(readdirpath, (err, data) => {
if (err) {
console.log(err);
} else {
if (data.isDirectory()) {
console.log('-->isDirectory:' + file);
var readChildDir = fs.readdirSync(readdirpath);
console.log(readChildDir);
readFile(readChildDir, readdirpath)
} else {
console.log('-->isNotDirectory:' + file);
if (file.indexOf('.js') >= 0 && file.indexOf('.json') < 0) {
// 开始混淆代码
console.log('-->Start confusing code:' + file);
var cmd = 'npx javascript-obfuscator ' + readdirpath + ' --config index.json --output ' + readdirpath;
process.exec(cmd, function(error, stdout, stderr) {
console.log("error:" + error);
console.log("stdout:" + stdout);
console.log("stderr:" + stderr);
});
arr.push(readdirpath)
} else {
console.log('Non-folder - Non-js code :' + file);
}
}
}
})
} else {
console.log('-->skip------------');
}
}
index.json
{
"compact": false,
"controlFlowFlattening": true,
"controlFlowFlatteningThreshold": 1,
"numbersToExpressions": true,
"simplify": true,
"shuffleStringArray": true,
"splitStrings": true,
"stringArrayThreshold": 1
}
然后进入code-obfuscation文件夹执行命令行
node .\index.js
不过像这种在同一个文件夹下的两个页面只会执行一个js混淆加密
7、前端封装的方法
借鉴地址：https://blog.csdn.net/weixin_55176296/article/details/131309370
1、将一个对象里面的键值对转换成url地址
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result
}
该函数作为一个工具函数，用于将一个 JavaScript 对象转换为 URL 查询参数格式的字符串。在前端开发中，我们常常需要通过 AJAX 或者跳转链接的方式将数据传递到服务器端，此时将数据转换成 URL 查询参数格式是一种常见的做法。
下面是一个小栗子方便理解的
const params = {
name: "Jack",
age: 25,
hobbies: ["swimming", "jogging"],
address: {
city: "Beijing",
street: "Haidian",
},
};
const str = tansParams(params);
console.log(str);
// 输出： name=Jack&age=25&hobbies[0]=swimming&hobbies[1]=jogging&address[city]=Beijing&address[street]=Haidian&
通过调用该函数，我们能够将 JavaScript 对象转换为经过序列化的 URL 查询参数格式的字符串，并且这个过程是通用的，适用于从前端到后端的服务端开发。
2、将两个对象数据覆盖，如果检测有就合并没有就不合并
export function objAssign(target, provide) {
//注意这里遍历 target 的key
Object.keys(target).forEach((key) => {
// Object.prototype.hasOwnProperty.call 用于检查一个对象是否具有指定的自身属性（也就是不继承自原型链的属性）
if(Object.prototype.hasOwnProperty.call(provide, key)){
target[key] = provide[key];
}
});
}
Object.prototype.hasOwnProperty.call 用于检查一个对象是否具有指定的自身属性（也就是不继承自原型链的属性）
const object = {
name: 'John',
age: 30
};
console.log(Object.prototype.hasOwnProperty.call(object, 'name')); // true
console.log(Object.prototype.hasOwnProperty.call(object, 'toString')); // false
例如：
const target = { a: 1, b: 2 };
const provide = { b: 3, c: 4, d: 5 };
objAssign(target, provide);
console.log(target); //{a: 1, b: 3}
跟obj.assign还是有一定的区别的
const target = { a: 1, b: 2 };
const provide = { b: 3, c: 4, d: 5 };
console.log('123',Object.assign(target,provide))
// {a: 1, b: 3, c: 4, d: 5}