受前端老学姐的影响,很早就想写写东西记录下日常的bug,但始终没有迈开那关键的一步,这个是她的 博客，感兴趣的小伙伴可以收藏一下,话不多说,下面就是我在日常工作中整理了一下基本(沙比)需求的解决办法。

微信小程序系列

小程序打开pdf文件并重命名

小程序开发中甲方需要插入一份pdf文件,正常的流程是将源文件通过上传文件接口上传至服务器后，前端拿到其返回的url链接,通过微信Api打开下载这个链接即可,可是问题来了,正常打开后该文件的文件名为32位字符串？这显然不符合甲方霸霸那独特且刁钻的口味,没办法,改呗,视图如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
wx.downloadFile({//亲测有效,非常银杏化
		url: 'https://oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/zjty-oss/zjsport_filehost/2021-10-18/2a32dd2778a44e32abf8ad9d5b9186f4-file.pdf', //接口pdf路径
		success(val) {
			const Path = val.tempFilePath;
			const fs = wx.getFileSystemManager();
			fs.saveFile({
				tempFilePath: Path, //Path我这里是wx.downloadFile()下载下来的文件临时地址
				//wx.env.USER_DATA_PATH这个是微信文件的路径  没试过别的  别的路径一般没有权限
				filePath: wx.env.USER_DATA_PATH + '/' + '浙体产业宣传册' + '.pdf',
				success: function(res) {
					wx.openDocument({
						filePath: res.savedFilePath,
						showMenu: true, //分享的按钮
						fileType: 'pdf',
						success: function(res) {
							//现在再分享给别人的话 就有后缀了
							console.log('打开成功');
						}
					})
				},
				fail: function(res) {
					console.log(res)
				}
			})
		}
	})

微信分享app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const httpUrl = "https://www.zjlanghun.com/logo.png";		//分享缩略图
function goShare(obj){ 
	console.log("obj: " + JSON.stringify(obj));
	uni.showActionSheet({
	    itemList: ['微信好友', '分享到朋友圈'],
	    success: function (res) {
			if(res.tapIndex==0){	//微信好友	
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: obj.href,
				    title: obj.title,
				    summary: obj.intro,
				    imageUrl: httpUrl,
				    success: function (res) {
				        // console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        // console.log("fail:" + JSON.stringify(err));
				    }
				});
			}else{		//分享到朋友圈
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 0,
				    href: obj.href,
				    title: obj.title,
				    summary: obj.intro,
				    imageUrl: httpUrl,
				    success: function (res) {
				        // console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        // console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
	    },
	    fail: function (res) {
	        // console.log(res.errMsg);
	    }
	});
}

移动端-浙里办应用开发

引入高德地图JSapi并实现周边搜索功能

由于是在浙里办App里面开发,所以我用的浙里办定位的api,喜欢的话可以也可使用高德自身的定位,懒得放图了,直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
	<view>
		<view class="map" id="map"></view>
		<view id="panel"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				type:''
			}
		},
		onLoad(option) {
			console.log(option.type)
			this.type = option.type //上个页面传过来的搜索类型 例如'酒店'
			console.log('我先执行')
		},
		mounted() {
			console.log('我后执行')
			this.creatMap()
		},
		methods: {
			//获取当前位置信息
			async getMyLocation() {
				console.log(111111)
				await ZWJSBridge.getLocation().then((result) => {
					console.log(result.latitude);
					this.latitude = result.latitude
					this.longitude = result.longitude
				}).catch((error) => {
					console.log(error);
				});
			},
			async creatMap(){
				try{
					await this.getMyLocation()
					var that = this
					var marker, map = new AMap.Map("map", {
						resizeEnable: true,
						zoom: 15,
						center: [that.longitude, that.latitude]
					});
					marker = new AMap.Marker({
						icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
						position: [that.longitude, that.latitude],
						offset: new AMap.Pixel(-13, -30)
					});
					marker.setMap(map);
					AMap.service(["AMap.PlaceSearch"], function() {
						//构造地点查询类
						var placeSearch = new AMap.PlaceSearch({
							// type: '住宿', // 兴趣点类别
							pageSize: 3, // 单页显示结果条数
							pageIndex: 1, // 页码
							map: map, 
							panel: "panel", // 结果列表将在此容器中进行展示。
							autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
						});
					
						placeSearch.searchNearBy(that.type, [that.longitude, that.latitude], 1000, function(status, result) {
							console.log(status, result)
						});
					});
				}catch(err){
					console.log(err)
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.map {
		width: 100%;
		height: 100vh;
	}

	#panel {
		position: fixed;
		background-color: white;
		max-height: 90%;
		overflow-y: auto;
		bottom: 10rpx;
		width: 100%;
	}

	/deep/.amap-icon img {
		width: 50rpx;
		height: 60rpx;
	}
</style>

ps:记得引入高德的JsApi,高德demo演示

原生uniapp项目变成vue-cli工程,并指定build打包路径

浙里办新平台项目单应用的部署发布需要vue-cli工程的项目,原因是新平台下发布项目会默认依次执行 npm i,npm run serve,npm run build,并且打包后的文件夹只能叫build,并且执行build文件夹下面根目录的index.html文件,下面将展示如何将uni项目套个vue-cli的壳并且修改默认的打包路径,如下:
一、全局安装vue-cli

1
npm install -g @vue/cli

二、创建一个空的uni-app工程,模板选择默认模板就好了

1
vue create -p dcloudio/uni-preset-vue demo

三、安装sass

1
2
3
4
npm install node-sass@4.14.1 --save
npm install sass-loader@8.0.0 --save

// 注：node-sass和sass-loader安装需要制定版本，版本太高会不兼容，指定版本如安装不成功自行百度解决办法

四、偷梁换柱

1
将新项目中的src下面的文件全部删掉,将原来uni项目全部拷贝到src下面

五、将uni的less文件全部改成scss,包括vue页面lang=’less’替换为lang=’scss’
六、修改build路径,根目录下package.json文件build-h5配置

1
2
3
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"
替换为
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=build vue-cli-service uni-build"

浙里办单应用二次回退问题解决

当我们项目中存在获取用户信息的操作时,必然会用到浙里办的单点登录,就是用一个空白的首页里面存放单点登录的跳转链接,判断用户是否登录/实名认证,若已登录/实名认证,则重定向到我们项目初始着陆页面,按照这个思想逻辑来实现单点登录的话,难免会遇到用户端二次回退的问题(在项目着陆页面触发移动端的返回事件后会返回到我们的单点登录的空白页面,也有可能存在回退死循环,根本无法通过默认的回退事件回退到上一个页面),解决的办法也很简单,可以考虑在项目着陆页面加个浙里办的Api——关闭当前应用,如下:

ZWJSBridge.close().then((result) => { console.log(result); }).catch((error) => { console.log(error); });

ps:此处需要监听移动端的默认返回事件,用这个api替换掉就行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
methods:{
	goBack(){
     ZWJSBridge.close().then((result) => { console.log(result); }).catch((error) => { console.log(error); });
    }
},
mounted(){
      if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);}
},
destroyed(){
     window.removeEventListener('popstate', this.goBack, false);
  },

浙里办法人+个人的单点登录判断

有时候浙里办的应用需要支持法人和个人两种身份的登录，且登录后的着落页面相同，就好比一个表单，它既能让法人登录后去提交也支持个人登录后去提交，而不是两个分开的页面。登录判断如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ZWJSBridge.onReady(() => {
	// alert(1111111);
	 console.log('初始化完成后，执行bridge方法')
	}); 
 	console.log(window.location.href)
 ZWJSBridge.getUserType().then((result) => { 
	 console.log(result.userType); 
		if(result.userType == 2){
			if(window.location.href.indexOf('userData') == -1){
				window.location.replace(
					'https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=https://gl.tyj.zj.gov.cn/api-movement/map/api/user/corpLogin?goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001943960/reserved/index.html1'
				)
				var str = util.getQueryString("userData"); //如果在浙里办实名认证过,就能拿到返回的信息
				var temp = JSON.parse(str);
				uni.setStorageSync('zuserId', temp.uniscid);
				return
			}
		}else{
			if(window.location.href.indexOf('login') == -1){
				window.location.replace(
					'https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=qmjsggfwyy&goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001943960/reserved/index.html'
				)
				var str = util.getQueryString("user"); //如果在浙里办实名认证过,就能拿到返回的信息
				var temp = JSON.parse(str);
				uni.setStorageSync('user', temp);
				uni.setStorageSync('apiToken', temp.apiToken);
				uni.setStorageSync('zuserId', temp.userId);
				console.log(uni.getStorageSync('zuserId'),88888)
				return
			}else if(window.location.href.split('=')[1] === "false#/"){
				uni.showModal({
					content: "请您完成实名制认证，谢谢",
					showCancel: false
 					})
				return
				}
		}
		uni.reLaunch({
			url:"./examine"
		})
	 }).catch((error) => {
	 console.log(error); 
	});

最后更新： 2021年12月21日 16:55

原始链接： https://corn0124.cn/2021/11/23/%E7%A2%8E%E7%89%87%E5%8C%96%E7%9F%A5%E8%AF%86%E7%82%B9/

赏
× 我是好人
打赏二维码