利用uni-app封装webview为安卓app

写这个博客的时候.心情是比较激动的.真心觉得uni-app这个框架的强大.虽然个人开发者做的小程序,没有办法添加业务域名.不能直接用webview封装网页成小程序,但是app是可以的,uni-app目前一共可以编译成四个平台:小程序,H5,安卓,IOS,因为IOS要开发者证书,所以我不考虑,小程序做不了,H5没必要,所以我就萌生了将hexo封装成安卓app的想法.

简单封装代码:

其实uni-app的封装是很简单的,直接用开发工具:HbuilderX,新建一个uni-app的默认模板项目.然后修改一下manifext.json中的基础配置,图标配置就可以了:
image
新建的默认项目,有一个index.vue已经新建好了.是空的,直接贴上下面的代码就可以了: 

1
2
3
4
5
<template>
    <view>
        <web-view src="https://blog.coder666.cn"></web-view>
    </view>
</template>

代码简单到了极致.webview就是这样.代码写好以后,直接点击HbuilderX顶部的发行=>原生APP-云打包就可以直接打包了,打包完成后,在控制台上会显示下载地址,下载到手机直接安装就可以正常访问了.

更多的功能选择:

这样的APP肯定是没有什么亮点的.至少,得有一个分享的功能,而uni-app的分享也是极其简单的,而且当前的app也没有返回上一页的操作,所以这里,我打算在原生的顶部位置加入两个icon,一个左上角的返回,一个右上角的分享.
pages.json中加入顶部原生导航栏的设定: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "好雨知时节",
		"app-plus": {
			"titleNView": {
				"buttons": [{
					"text": "\ue471",
					"fontSize": "22px",
					"fontSrc":"./static/uni.ttf",
					"float":"left"
				},{
					"text": "\ue405",
					"fontSize": "22px",
					"fontSrc":"./static/uni.ttf",
					"float":"right"
				}]
			}
		}
	}
}

app与小程序不一样,所以ttf文件是可以本地引入的,这里我们把这个带有iconfont的ttf文件放到了static文件目录下,然后将buttons的text设定为相应的编码,记得一定要写在”app-plus”下,这表示只在APP中才会是有效的编译,图标添加以后,再运行APP就会出来两个图标,一边各一个,左边的是返回上一页.右边一个分享.
APP的原生头部点击事件监听为:onNavigationBarButtonTap,返回的数据中有当前被点击的按钮的数据,还有index属性,可以用来区分是点了第几个按钮,返回与分享的index分别是0和1.
编码到了这里.就会发现一个问题.webview中的URL,在用户点击不停的切换的时候,我要分享的url如何获取的问题,这里看了一下uni-app的webview相关的API.但是发现其实也没什么用.而我在uni-app的官方群中请求群管理,在我不断的逼问下后,终于找到了方法:

webview中可以写plus.storage，与uni-app操作的是同一个storage,uni-app底层用的其实也是5+的storage

uni-app的webview的相关api是真的少得可怜,不过群管理的这一席话一下就解决了我的问题,大致的解决思路如下:
页面加载后,将当前页面的title与url存储进plus.storage,用户点击头部的分享后,uni-app去plus.storage中读取相关信息,分享给相应的平台.
这里需要在hexo中加入代码,两个地方.一个是主页,一个是文章页.因为我是yilia主题.这里可能不同的主题会有一些不一样,请自行熟悉自己的主题文件配置…
hexo\themes\yilia\layout_partial\archive.ejs 为主页文件
hexo\themes\yilia\layout_partial\article.ejs 为文章页面文件
在这两个文件中直接粘贴如下代码: 

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
	// H5 plus事件处理
	function plusReady() {
		// 5+ API code
		plus.storage.setItem("pageUrl", window.location.href);
		plus.storage.setItem("shareTitle", '雨时节的博客');
		// ......
	}
	//监听“plusready”事件
	document.addEventListener("plusready", plusReady, false);
</script>

这里的注释我都没有删掉.方便大家明白,plus是H5+的页面内置对象,在页面中可以直接调用,上面的代码是把数据存入storage,在uni-app中直接plus.storage.getItem(key)就可以拿到了.
uni-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
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<script>
	export default {
		data() {
			return {
				shareText: '你的好友分享给你一篇博客',
				image: '../../static/logo.png',
				shareType: 0,
				shareData: {},
				pageUrl: ''
			}
		},
		onLoad() {

		},
		onNavigationBarButtonTap(obj) {
			if (obj.index == 0) {
				uni.navigateBack({
					delta: 1
				});
				return;
			}
			this.pageUrl = plus.storage.getItem("pageUrl");
			if (this.pageUrl) {

			} else {
				uni.showToast({
					title: '请等页面加载完成!',
					icon: 'none',
					mask: true
				});
				return;
			}
			uni.getProvider({
				service: "share",
				success: (e) => {
					console.log("success", e);
					let data = []
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '分享到微信好友',
									id: 'weixin',
									sort: 0
								})
								data.push({
									name: '分享到微信朋友圈',
									id: 'weixin',
									type: 'WXSenceTimeline',
									sort: 1
								})
								break;
							case 'sinaweibo':
								data.push({
									name: '分享到新浪微博',
									id: 'sinaweibo',
									sort: 2
								})
								break;
							case 'qq':
								data.push({
									name: '分享到QQ',
									id: 'qq',
									sort: 3
								})
								break;
							default:
								break;
						}
					}
					data = data.sort((x, y) => {
						return x.sort - y.sort
					});
					let stringarray = [];
					for (var i = 0; i < data.length; i++) {
						stringarray.push(data[i].name);
					}
					uni.showActionSheet({
						itemList: stringarray,
						success: ress => {
							for (var i = 0; i < data.length; i++) {
								if (i == ress.tapIndex) {
									this.shareData = data[i];
								}
							}
							this.share();
						},
						fail: ress => {
							uni.showToast({
								title: '欢迎您再来分享!',
								icon: 'none',
								mask: true
							});
						}
					});
				},
				fail: (e) => {
					console.log("获取登录通道失败", e);
					uni.showModal({
						content: "获取登录通道失败",
						showCancel: false
					})
				}
			});
		},
		methods: {
			handleMessage(evt) {
				console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
			},
			async share() {
				var e = this.shareData;
				let shareTitle = plus.storage.getItem('shareTitle');
				if (!shareTitle && (this.shareType === 1 || this.shareType === 0)) {
					uni.showModal({
						content: "分享内容不能为空",
						showCancel: false
					})
					return;
				}

				if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
					uni.showModal({
						content: "分享图片不能为空",
						showCancel: false
					})
					return;
				}

				let shareOPtions = {
					provider: e.id,
					scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession", //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
					type: this.shareType,
					success: (e) => {
						console.log('success' + JSON.stringify(e));
					},
					fail: (e) => {
						console.log('fail' + JSON.stringify(e));
					},
					complete: function(e) {
						if (e.errMsg == 'share:ok') {
							uni.showModal({
								content: "谢谢分享!",
								showCancel: false
							})
						} else {
							uni.showModal({
								content: "哎呀?为毛不分享?",
								showCancel: false
							})
						}
					}
				}
				shareOPtions.summary = this.shareText;
				shareOPtions.imageUrl = this.image;
				shareOPtions.title = shareTitle ? shareTitle : '雨时节的博客';
				shareOPtions.href = this.pageUrl;

				uni.share(shareOPtions);
			}

		}
	}
</script>

分享归分享.但是这里还是有些坑要说一下:
APP在写出来后,直接真机调试,一点分享,出来了四个选项,都可以分享.但是分享出去,上面写的app是hbuilder,然后我打包后点分享,这个getProvider方法得到的是空数组.自己想了很久,才发现,这个分享也是需要平台支持的.要分享微信,需要在微信开放平台上创建应用并通过审核,微博我就不考虑了,QQ要能分享就得在腾讯开放平台上创建应用,这里要说一下微信的审核了…我提交的小程序都三四天了没动静….而微信开放平台的应用要七个工作日,腾讯开放平台直接24小时就能审核通过,差别真是大呀…而且腾讯开放平台,审核没通过的时候appid就给你了,可以直接拿来用…
分享的配置在manifest.json中的APP SDK配置中,如下图:
image
虽然腾讯没有通过审核.不过appid我已经加上去了. 也可以分享的,微信只能等审核通过了才有appid与appsecret了…漫长的等待…
分享的效果还是有的,我上面的代码是选了图文分享,因为其它的分享我都不太喜欢,下图是分享效果:
image
棒棒的了吧.然后就是静静等微信开放平台审核通过了.
分享到此为止,这个分享功能,说到底.最核心的功能就是webview中的h5页面与uniapp的数据交互问题,不然分享也无从谈起,对着uniapp的QQ群管理员大半夜的一再追问,也终于得到了自己想要的答案,还是很感谢的.

赏

谢谢你请我吃糖果

支付宝
微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

好雨知时节<br><br>记录自己IT生涯的点点滴滴