公众号：获取code值
这里只是做个记录，我这个也是看的别人的，查了很多
这里强调一下，因为公众号特有的方式，获取code要通过地址栏去请求，然后再重定向，会导致一个问题，页面会闪一下
所以，项目一进来的页面我处理成了加载动画的页面（pages/index/loding），在重定向到项目的主页面（pages/index/index）
我写成 /h5/#/pages/index/index’这样的原因是项目打包后的，目录在h5文件里面
公众号：获取 openId值
这个需要后端帮你去拿，一般后端需要的是appId: appSecret:和你获取到的 wxCode
前端拿openID我不会做，
// 插曲
在渲染列表的时候为了吧电话中间四位数字隐藏，网上随便找了个方法，结果有些手机能显示出来，有些不能，把我恶心的快吐了，最关键的你们知道是啥不，偏偏我们几个开发的手机都可以，就测试小姑凉的两个手机不行，另一个测试的手机也不行，
我真的是被恶心的不行了，过了三天后来我把测试的微信弄成开发人员，在微信开发工具调试才找得原因，难道是账号的问题，微信开工具登陆和手机应该没问题吧，那为啥两个账号登陆编译结果不一样呢，靠
给你们看看一开始我写的代码
<view class="travelerClass">
<label>手机号</label>
<text> {{ itm.travelerMobile.replace(/^(.{4})(?:\d+)(.{4})$/, "\$1******\$2") }} </text>
</view>
就是它，tmd不知道改骂谁，真的是r了狗了，uniapp真是一坨***，我也是脑子有病，为偷个懒这样写，浪费了至少4个小时，
后来我改成下面这样，就好了，用过滤方法也可以的，但就是想偷懒搞自己，
所以，自己的切身体会是，uniapp虽然还行，毕竟不能把vue的所有语法都兼容了，
总有他们漏掉的，尽量吧代码写规范，用普遍的写法，不要整些花里胡哨的
处理数据不要不要不要在标签里面用一些不常见的写法，不然把自己搞死，都不知道
res.records.forEach(item=>{
item.travelerMobile = item.travelerMobile.replace(/^(.{4})(?:\d+)(.{4})$/, "\$1******\$2")
item.certificatesCode = item.certificatesCode.replace(/^(.{4})(?:\d+)(.{4})$/, "\$1********\$2")
})
App.vue
<script>
import api from 'server.js'
import { getOpenId } from '@/api/index.js';
import store from './store'
export default {
onLaunch: function() {
this.wxAuthorize()
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods: {
wxAuthorize() {
if(sessionStorage.getItem('openid')){
//
}else{
let uri = window.location.href + '/h5/index.html'
console.log("获取到uri", uri);
let base_url = api.serviceUrl
let params = this.getUrlParam('code'); // 地址解析
console.log("code:",params);
// 如果拿到code，调用授权接口，没有拿到就跳转微信授权链接获取
if (params) {
console.log("获取到code");
// api.wxAuth(params); // 调用后台接口，授权
this.getOpenId(params)
}else {
console.log("没有code");
let appid = api.appId ; //修改为你的appid
let uri = encodeURIComponent(base_url + '/h5/#/pages/index/index');
let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=
${appid}&redirect_uri=
${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
window.location.href = authURL;
}
}
},
// 发送code 获取信息
getOpenId(wxCode) {
getOpenId({
appId: api.appId,
appSecret: api.appSecret,
wxCode: wxCode
}).then(res=>{
store.state.openid = res
sessionStorage.setItem('openid', res)
console.log(store.state,'store.--openid')
})
},
//解析url参数
getUrlParam (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
let url = window.location.href.split('#')[0]
let search = url.split('?')[1]
if (search) {
var r = search.substr(0).match(reg)
if (r !== null) return unescape(r[2])
return null
} else {
return null
}
},
}
}
</script>
<style>
/*每个页面公共css */
</style>
处理富文本图片不全
getContentInfo(id){
getContentInfo(id).then(res=>{
// 就这一句话，处理视频同理
let content = res.content.replace(
/\<img /gi,
'<img style="width:90%" '
);
this.formData = res
this.formData.content = content
})
}
视频播放
这个也是找了好久，之前小程序处理起来很简单，到公众号就嗝屁了，所以啊这uiapp真*****，
说啥呢，是自己学艺不精还是文档不全，全看自己领悟
<template>
<video id='myVideo'
:initial-time="initialTime"
:src="src"
:enable-play-gesture="enablePlayGesture"
:controls="true"
@play="handlePlay"
@pause="handlePause"
@ended="handleEnd"
@controlstoggle='handlecontrolstoggle' ref='videoRef'
class="uni-video-video" x5-video-player-type="h5" x-webkit-airplay="allow"></video>
</template>
<script>
export default {
props: {
src: {
type: String,
default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3c1782e0-60ab-11eb-8ff1-d5dcf8779628.m4v',
required: true,
},
poster: {
type: String,
default: 'https://img0.baidu.com/it/u=2694049647,1435745352&fm=26&fmt=auto&gp=0.jpg',
required: false,
},
videoAutoplay: {
type: Boolean,
default: true,
},
initialTime: {
type: Number,
default: 0,
},
muted: {
type: Boolean,
default: false,
},
},
data() {
return {
enablePlayGesture: true,
}
},
watch: {
videoAutoplay(val) {
if (!val) {
//视频暂停
uni.createVideoContext('myVideo').pause()
}
}
},
components: {},
methods: {
handlePlay() {
this.$emit('play', {});
this.$nextTick(function() {
this.autoplay = false
})
},
handlePause() {
this.$emit('pause');
},
handleEnd() {
this.$emit('ended');
},
handlecontrolstoggle() {
this.autoplay = false
}
},
}
</script>
<style>
.uni-video-video {
width: 100%;
height: 100%;
}
</style>
调用方法
<template>
<view class="videoClass" :style="{height: height}" >
<view v-if="videoUrl" class="videocontent" v-show="typeClass === 'video'" @click="videoPauseFun(videoUrl)">
<video-item
:style="{height: height }"
v-show="typeClass === 'video'"
:videoAutoplay="videoAutoPlay"
:src="videoUrl"
@play="handleVideoPlay"
@pause="handleVideoPause"
@ended="handleVideoEnd"></video-item>
</view>
</view>
</template>
<script>;
import VideoItem from '@//components/video.vue';
export default {
components:{ VideoItem},
data() {
return {
videoPauseShow: false, //暂停播放视频
videoUrl: '',
videoContext: null,
videoSrc: '',
indicatorDots: true,
swiperAutoplay: true,
interval: 4000,
duration: 500,
//以下是控制viedo的
videoAutoPlay:false,
};
},
methods: {
videoPauseFun(){
if(!this.videoAutoPlay){
this.handleVideoPlay()
}else{
this.videoPauseShow = false
this.videoAutoPlay = false;
}
},
handleVideoPlay() {
this.videoPauseShow = false
this.videoAutoPlay = true;
},
handleVideoPause() {
this.videoPauseShow = true
},
handleVideoEnd() {
this.videoPauseShow = true;
},
}
};
</script>
<style lang="scss" scoped>
.videoClass{
width: 100%;
position: relative;
.videocontent{
width: 100%;
height: 221px;
.video{
width: 100%;
height: 221px;
}
}
.myVideoPopup{
width: 100%;
}
.playClass{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 40px;
height: 40px;
margin: auto;
}
.videoPricelist{
position: absolute;
bottom: 31px;
right: 15px;
z-index: 11;
.iconfont{
display: flex;
align-items: center;
font-size: 12px;
color: #ffffff;
background: #2e322f;
margin-left: 12px;
padding:1px 5px;
border-radius: 5px;
margin-bottom: 10px;
image{
width: 13px;
margin-right: 6px;
}
}
.bgVP{
background: #0aa3f4;
}
}
}
</style>
扫一扫
5626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
