uniapp 官网
实现吸顶效果
1
2
3
4
5
6
| .ceiling{
position: -webkit-sticky;
position: sticky;
top: var(--window-top);
z-index: 99;
}
|
如何让页面铺满整个屏幕
首先在 App.vue 文件中设置：
1
2
3
4
5
| uni-page-body,
html,
body {
height: 100%;
}
|
再在页面中添加如下样式即可：
1
2
3
4
| .page {
height: 100%;
background: red;
}
|
H5配置代理
在根目录的 manifest.json 文件中，在源码视图的 h5 上添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| "h5" : {
"devServer" : {
"port" : 8600,
"disableHostCheck" : true,
"proxy" : {
"/api" : {
"target" : "xxxxxxxxx",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/api" : "/"
}
}
}
}
}
|
上拉加载更多的实现
使用 uni-load-more 组件。
在需要添加此功能的页面中添加如下代码：
1
| <uni-load-more :status="status"></uni-load-more>
|
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
| export default {
data() {
return {
status: 'more',
pageSize: 10,
total: 0,
current: 1,
allData: []
}
},
onReachBottom() {
if (this.allData.length != this.total) {
this.status = 'loading'
this.current++
this.getData(this.current)
this.status = 'more'
} else {
this.status = 'noMore'
}
},
methods: {
getData(current) {
this.total = res.data.total
this.allData =[...this.allData,... res.data.records]
},
}
}
|
下拉刷新的实现
首先在 pages.json 中给需要该功能的页面中添加 enablePullDownRefresh。如果需要全局使用，在 globalStyle 里添加即可：
1
2
3
4
5
6
7
| {
"path": "pages/xxx",
"style": {
"navigationBarTitleText": "xxx",
"enablePullDownRefresh": true
}
}
|
然后在页面中添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| export default {
data() {
return {
allData: []
}
},
methods: {
pullDownRefresh() {
this.allData = []
this.getData()
uni.stopPullDownRefresh();
}
},
onPullDownRefresh() {
this.pullDownRefresh()
}
}
|
运行到微信小程序报错
报错内容：
1
| Cannot read property 'forceUpdate' of undefined
|
解决：新建一个微信小程序项目，获得一个测试的 appid，然后复制过来即可。
隐藏tab栏
1
2
3
4
5
6
7
8
|
<script>
export default {
onLaunch: function() {
uni.hideTabBar({})
}
}
</script>
|
使用iconfont图标
在 iconfont 中选择图标，并加入项目。
然后下载至本地，解压缩后打开文件 iconfont.css 文件。
在项目中新建文件 common/css/iconfont.css，并将 iconfont.css 文件内容复制过去。
注意：iconfont.css 文件的 url 只留一个，类似于：
1
2
3
4
| @font-face {
font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAA....省略....') format('woff2')
}
|
或者有些 iconfont.css 文件类似于这样：
1
2
3
4
5
6
| @font-face {
font-family: "iconfont";
src: url('iconfont.woff2?t=111111111') format('woff2'),
url('iconfont.woff?t=111111111') format('woff'),
url('iconfont.ttf?t=111111111') format('truetype');
}
|
我们需要进入 giftofspeed 网站将 iconfont.ttf 文件转换成 base64。
进入网站转换后我们把上面代码更换成：
1
2
3
4
| @font-face {
font-family: "iconfont";
src: url('data:font/truetype;charset=utf-8;base64, 刚才转换的base64所有内容粘贴到此处') format('truetype');
}
|
然后在 App.vue 文件中引入：
1
| @import url("@/common/css/iconfont.css");
|
使用：
1
| <view class="iconfont icon-demo"></view>
|
H5禁止用户下拉网页
1
2
3
| <template>
<view id="page"></view>
</template>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script>
export default {
onReady() {
let con = document.getElementById('page');
con.ontouchmove = function(e) {
e.preventDefault();
}
},
}
</script>
|
APP实现检查更新
在 android / ios 中实现 APP 更新。
1
2
3
4
5
| <template>
<view>
<view @click="checkUpdates">检查更新</view>
</view>
</template>
|
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
| export default {
methods: {
checkUpdates() {
uni.getSystemInfo({
success: (res) => {
if (res.platform == "android") {
this.AndroidCheckUpdate();
} else if (res.platform == "ios") {
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id1234566666666`
}, (e) => {
});
}
}
})
},
AndroidCheckUpdate() {
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
if (plus.networkinfo.getCurrentType() != 3) {
this.$showModal({
title: "警告",
concent: "检测到您目前非Wifi连接，为节约您的流量，建议您连接WIFI之后更新，确定要立即更新吗？",
IsclickEvent: false
}).then(() => {
this.updateCall()
}).catch(() => {})
} else {
this.updateCall()
}
})
},
updateCall() {
let dtask = plus.downloader.createDownload('下载地址', {}, (d, status) => {
if (status == 200) {
plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {},
(error) => {
uni.showToast({
title: '安装失败',
mask: false,
duration: 1500
});
})
} else {
uni.showToast({
title: '更新失败',
mask: false,
duration: 1500
});
}
});
dtask.start();
let prg = 0;
let showLoading = plus.nativeUI.showWaiting("正在下载");
dtask.addEventListener('statechanged', (task, status) => {
switch (task.state) {
case 1:
showLoading.setTitle("正在下载");
break;
case 2:
showLoading.setTitle("已连接到服务器");
break;
case 3:
prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task
.totalSize)) * 100);
showLoading.setTitle("APP版本更新,正在下载" + prg + "% ");
break;
case 4:
plus.nativeUI.closeWaiting();
break;
}
});
}
}
}
|
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
| export default {
onLaunch: function() {
plus.push.getClientInfoAsync((info) => {
console.log(info);
console.log(info.clientid, '消息推送的clientid');
});
plus.push.addEventListener("click", msg => {
console.log(msg, '消息推送');
}, false);
plus.push.addEventListener("receive", (msg) => {
console.log(msg, '监听在线消息事件');
if (uni.getSystemInfoSync().platform == 'ios') {
if (msg.type == 'receive') {
let options = {
cover: false,
title: msg.payload.title
}
plus.push.createMessage(msg.payload.content, JSON.stringify(msg.payload), options);
}
} else if (uni.getSystemInfoSync().platform == 'android') {
}
}, false)
},
}
|
持续更新中！
微信
支付宝
QQ
