
5+APP,使用HbuilderX打包,plus.runtime.openURL(),IOS无法打开到指定的APP下载地址
plus.runtime.openURL(encodeURI('itms-apps://apps.apple.com/cn/app/鹏城老兵/id1568236759'))
IOS要求比较严格,需要用encodeURI转一下地址
参考:https://blog.csdn.net/weixin_43604585/article/details/107936245
plus.runtime.openURL(encodeURI('itms-apps://apps.apple.com/cn/app/鹏城老兵/id1568236759'))
IOS要求比较严格,需要用encodeURI转一下地址
参考:https://blog.csdn.net/weixin_43604585/article/details/107936245
收起阅读 »
一种避免页面来回跳转的解决方法
一、问题背景:
两个页面多次来回点击后循环跳转,返回时会一层一层返回重复的页面,想避免这种情况,在安卓中可以设置页面的启动模式,uniapp我不知道有没有设置启动模式这种方法。
1、与别人的聊天页面可以点击头像跳转个人主页,个人主页中也可以点击聊天进入和他的聊天页面。设聊天页面为a页面,个人主页为b页面。
2、应用中可以从某个不确定页面跳转到a,再从a到b...(情况一),也可以从某个不确定页面先跳转到b,再跳转到a....(情况二)。
二、两种情况的预期效果:
情况一:c a b a b a ==> c a b
从c跳转到a,再到b,再到a b a ....循环跳转后,如果当前在a页面时,点击返回回到c,如果当前在b页面,点击返回回到a,再点返回回到c。
情况二:d b a b a b ==> d b a
从d跳转到b,再到a,再到b a b ....循环跳转后,如果当前在b页面时,点击返回回到d,如果当前在a页面,点击返回回到b,再点返回回到d。
三、分析:
通过getCurrentPages()判页面栈里的页面,
在a页面中:判断栈中如果a页面先进来,b页面再进来,就是情况一,此时a到b,就用uni.navigateTo正常跳(如果此时栈中还没有b,也是此方法)。如果栈中是b页面先进来,a页面再进来,就是情况二,此时a到b,就用uni.navigateBack返回的方式实现页面切换。
在b页面中:同上分析
四、解决方法:
在a页面:a跳b时(没有b是正常跳b):如果第一个a在第一个b前面,就是一,正常跳,如果第一个a在第一个b后面,就是二,直接返回。
在b页面:b跳a时(没有a是正常跳a):如果第一个b在第一个a前面,就是二,正常跳,如果第一个b在第一个a后面,就是一,直接返回
五、其他:
也可以通过从不同页面传递一个变量到a、b中区分这两种情况,然后执行不同的跳转,但我觉得这还得去修改其他页面,不利于扩展。就直接改这两个页面,不用动其他页面。
但官方文档建议:
注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
用了下感觉没啥问题就先这样用了。
六、代码:
聊天页面:
//去个人主页
toPerson(user){
//获取页面栈中所有页面
let pages = getCurrentPages()
//如果想打印直接这样打印,不要加什么拼接字符串、JSON.stringify()什么的
console.log(getCurrentPages());
//栈中页面的路径单独保存为数组,方便后续比较
let pageUrl = []
for (let i = 0; i < pages.length; i++) {
//pages[i].$page.fullPath 是页面的全路径,会连页面传递的参数都打印出来,不方便后续比较
// console.log("第"+i+"个页面 = " + pages[i].$page.fullPath);
console.log("第"+i+"个页面 = " + pages[i].route);
//用pages[i].route就比较单纯了
pageUrl.push(pages[i].route)
}
//获取a、b页面第一次入栈的位置
let first_a = pageUrl.indexOf("pages/home/chat")//聊天页面
let first_b = pageUrl.indexOf("pages/mine/person_center")//个人主页
if (first_b < 0) {
console.log("没有b是正常跳b");
uni.navigateTo({
url: '../mine/person_center?user=' + JSON.stringify(user)//业务逻辑跳转传的参数
})
} else {
if (first_a < first_b) {
console.log("正常跳 b ");
uni.navigateTo({
url: '../mine/person_center?user=' + JSON.stringify(user)//业务逻辑跳转传的参数
})
} else {
console.log("返回 b");
uni.navigateBack({
delta: 1
})
}
}
},
个人主页:
//去聊天页面
toChat() {
//获取页面栈中所有页面
let pages = getCurrentPages()
//如果想打印直接这样打印,不要加什么拼接字符串、JSON.stringify()什么的
console.log(getCurrentPages());
//栈中页面的路径单独保存为数组,方便后续比较
let pageUrl = []
for (let i = 0; i < pages.length; i++) {
//pages[i].$page.fullPath 是页面的全路径,会连页面传递的参数都打印出来,不方便后续比较
// console.log("第"+i+"个页面 = " + pages[i].$page.fullPath);//会带参数
console.log("第"+i+"个页面 = " + pages[i].route);
//用pages[i].route就比较单纯了
pageUrl.push(pages[i].route)
}
//获取a、b页面第一次入栈的位置
let first_a = pageUrl.indexOf("pages/home/chat")//聊天页面
let first_b = pageUrl.indexOf("pages/mine/person_center")//个人主页
if (first_a < 0) {
console.log("没有a是正常跳a");
uni.navigateTo({
url: '../home/chat?user=' + JSON.stringify(this.user)//业务逻辑跳转传的参数
})
} else {
if (first_b < first_a) {
console.log("正常跳 a ");
uni.navigateTo({
url: '../home/chat?user=' + JSON.stringify(this.user)//业务逻辑跳转传的参数
})
} else {
console.log("返回 a");
uni.navigateBack({
delta: 1
})
}
}
一、问题背景:
两个页面多次来回点击后循环跳转,返回时会一层一层返回重复的页面,想避免这种情况,在安卓中可以设置页面的启动模式,uniapp我不知道有没有设置启动模式这种方法。
1、与别人的聊天页面可以点击头像跳转个人主页,个人主页中也可以点击聊天进入和他的聊天页面。设聊天页面为a页面,个人主页为b页面。
2、应用中可以从某个不确定页面跳转到a,再从a到b...(情况一),也可以从某个不确定页面先跳转到b,再跳转到a....(情况二)。
二、两种情况的预期效果:
情况一:c a b a b a ==> c a b
从c跳转到a,再到b,再到a b a ....循环跳转后,如果当前在a页面时,点击返回回到c,如果当前在b页面,点击返回回到a,再点返回回到c。
情况二:d b a b a b ==> d b a
从d跳转到b,再到a,再到b a b ....循环跳转后,如果当前在b页面时,点击返回回到d,如果当前在a页面,点击返回回到b,再点返回回到d。
三、分析:
通过getCurrentPages()判页面栈里的页面,
在a页面中:判断栈中如果a页面先进来,b页面再进来,就是情况一,此时a到b,就用uni.navigateTo正常跳(如果此时栈中还没有b,也是此方法)。如果栈中是b页面先进来,a页面再进来,就是情况二,此时a到b,就用uni.navigateBack返回的方式实现页面切换。
在b页面中:同上分析
四、解决方法:
在a页面:a跳b时(没有b是正常跳b):如果第一个a在第一个b前面,就是一,正常跳,如果第一个a在第一个b后面,就是二,直接返回。
在b页面:b跳a时(没有a是正常跳a):如果第一个b在第一个a前面,就是二,正常跳,如果第一个b在第一个a后面,就是一,直接返回
五、其他:
也可以通过从不同页面传递一个变量到a、b中区分这两种情况,然后执行不同的跳转,但我觉得这还得去修改其他页面,不利于扩展。就直接改这两个页面,不用动其他页面。
但官方文档建议:
注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
用了下感觉没啥问题就先这样用了。
六、代码:
聊天页面:
//去个人主页
toPerson(user){
//获取页面栈中所有页面
let pages = getCurrentPages()
//如果想打印直接这样打印,不要加什么拼接字符串、JSON.stringify()什么的
console.log(getCurrentPages());
//栈中页面的路径单独保存为数组,方便后续比较
let pageUrl = []
for (let i = 0; i < pages.length; i++) {
//pages[i].$page.fullPath 是页面的全路径,会连页面传递的参数都打印出来,不方便后续比较
// console.log("第"+i+"个页面 = " + pages[i].$page.fullPath);
console.log("第"+i+"个页面 = " + pages[i].route);
//用pages[i].route就比较单纯了
pageUrl.push(pages[i].route)
}
//获取a、b页面第一次入栈的位置
let first_a = pageUrl.indexOf("pages/home/chat")//聊天页面
let first_b = pageUrl.indexOf("pages/mine/person_center")//个人主页
if (first_b < 0) {
console.log("没有b是正常跳b");
uni.navigateTo({
url: '../mine/person_center?user=' + JSON.stringify(user)//业务逻辑跳转传的参数
})
} else {
if (first_a < first_b) {
console.log("正常跳 b ");
uni.navigateTo({
url: '../mine/person_center?user=' + JSON.stringify(user)//业务逻辑跳转传的参数
})
} else {
console.log("返回 b");
uni.navigateBack({
delta: 1
})
}
}
},
个人主页:
//去聊天页面
toChat() {
//获取页面栈中所有页面
let pages = getCurrentPages()
//如果想打印直接这样打印,不要加什么拼接字符串、JSON.stringify()什么的
console.log(getCurrentPages());
//栈中页面的路径单独保存为数组,方便后续比较
let pageUrl = []
for (let i = 0; i < pages.length; i++) {
//pages[i].$page.fullPath 是页面的全路径,会连页面传递的参数都打印出来,不方便后续比较
// console.log("第"+i+"个页面 = " + pages[i].$page.fullPath);//会带参数
console.log("第"+i+"个页面 = " + pages[i].route);
//用pages[i].route就比较单纯了
pageUrl.push(pages[i].route)
}
//获取a、b页面第一次入栈的位置
let first_a = pageUrl.indexOf("pages/home/chat")//聊天页面
let first_b = pageUrl.indexOf("pages/mine/person_center")//个人主页
if (first_a < 0) {
console.log("没有a是正常跳a");
uni.navigateTo({
url: '../home/chat?user=' + JSON.stringify(this.user)//业务逻辑跳转传的参数
})
} else {
if (first_b < first_a) {
console.log("正常跳 a ");
uni.navigateTo({
url: '../home/chat?user=' + JSON.stringify(this.user)//业务逻辑跳转传的参数
})
} else {
console.log("返回 a");
uni.navigateBack({
delta: 1
})
}
}
收起阅读 »

uni.app 通过vue.config.js 实现.less文件的全局引入
并不是自己想要用less,我项目里面用的是scss,之前偶尔听朋友讲起,然后自己也百度了很多,也看了些帖子,基本都挨个儿试过了,都不行,后来终于知道vue.config.js这个怎么配置了。希望对在找这个的有点帮助。
let path = require('path');
let vars = path.resolve(__dirname, '你的.less文件的路径')
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
'hack': `true; @import "${vars}";`
}
}
}
}
}
并不是自己想要用less,我项目里面用的是scss,之前偶尔听朋友讲起,然后自己也百度了很多,也看了些帖子,基本都挨个儿试过了,都不行,后来终于知道vue.config.js这个怎么配置了。希望对在找这个的有点帮助。
let path = require('path');
let vars = path.resolve(__dirname, '你的.less文件的路径')
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
'hack': `true; @import "${vars}";`
}
}
}
}
}
收起阅读 »

5+ api videoplayer objectFit:'cover' 属性不起作用,有黑边问题
将 objectFit:'cover' 改成 'object-fit':'cover'
将 objectFit:'cover' 改成 'object-fit':'cover'

uniCloud clientDB,使用groupby分组统计,求每个商品的合计金额
{
data: [{
name: "商品1",
amount: 5,
price: 100
},{
name: "商品2",
amount: 5,
price: 200
},{
name: "商品3",
amount: 5,
price: 300
}]
}
#uniCloud clientDB,使用groupby分组统计,求每个商品的合计金额
const res = await db.collection('orders')
.groupBy('name')
.groupField('sum(multiply(amount,price)) as total')
.get()
返回结果如下
{
data: [{
name: "商品1",
total:500
},{
name: "商品2",
total:1000
},{
name: "商品3",
total:1500
}]
}
{
data: [{
name: "商品1",
amount: 5,
price: 100
},{
name: "商品2",
amount: 5,
price: 200
},{
name: "商品3",
amount: 5,
price: 300
}]
}
#uniCloud clientDB,使用groupby分组统计,求每个商品的合计金额
const res = await db.collection('orders')
.groupBy('name')
.groupField('sum(multiply(amount,price)) as total')
.get()
返回结果如下
{
data: [{
name: "商品1",
total:500
},{
name: "商品2",
total:1000
},{
name: "商品3",
total:1500
}]
}

video 组件 高阶晋级
video 组件 高阶晋级
前言
本文是为使用了uni-app
框架开发App
时 使用video
标签 但是播放部分视频有一定特殊需求时的解决方案。
如果现有功能已经满足日常开发,可以忽略本文。
IJKMediaFramework
- 目前uni-app中 video的实现 是基于
ijkplayer
基础之上的二次封装, 框架已经设置了一些属性解决常见的问题,例如 seek不准确, http重定向跳转到rstp,https无法播放等问题。
通过 video
标签中的 advanced
可以实现对于一些高级属性的设置,下边是示例
'format','codec','sws','player' 可以设置四种, 具体设置类型 通过文章所列或者 ijkplayer,ffmpeg 相关资料查询
<video :advanced= advanced> </video>
advanced = [
{
"key": "dns_cache_clear",
"value": 1,
"type": "format",
},
{
"key": "framedrop",
"value": 1,
"type": "player",
},
{
"key": "videotoolbox",
"value": 0,
"type": "player",
}
]
uni-app iOS端 video组件的设置
框架默认参数
Key | 默认值 | 注释 | 所属类型 |
---|---|---|---|
max-fps | 30 | 最大fps | player |
framedrop | 0 | 跳帧开关,如果cpu解码能力不足,可以设置成5,否则会引起音视频不同步,也可以通过设置它来跳帧达到倍速播放 | player |
video-pictq-size | 3 | 暂无 | player |
videotoolbox | 0 | 1开启 0关闭 硬解码(硬件解码CPU消耗低。软解,更稳定) | player |
videotoolbox-max-frame-width | 960 | 指定最大宽度 | player |
enable-accurate-seek | 1 | 某些视频在SeekTo的时候,会跳回到拖动前的位置,这是因为视频的关键帧的问题,通俗一点就是FFMPEG不兼容,视频压缩过于厉害,seek只支持关键帧,出现这个情况就是原始的视频文件中i 帧比较少 | player |
auto_convert | 0 | 自动转屏开关 | fortmat |
reconnect | 1 | 重连次数 | fortmat |
timeout | 30 1000 1000 | (超时时间,timeout参数只对http设置有效。若果你用rtmp设置timeout,ijkplayer内部会忽略timeout参数。rtmp的timeout参数含义和http的不一样。) | fortmat |
user-agent | Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Html5Plus/1.0 (Immersed/20) uni-app (具体值看真实设备的值) | User-Agent | fortmat |
dns_cache_clear | 1 | 清空DNS,有时因为在APP里面要播放多种类型的视频(如:MP4,直播,直播平台保存的视频,和其他http视频), 有时会造成因为DNS的问题而报10000问题的 | fortmat |
uni-app Android端 video组件的设置
框架默认参数
Key | 默认值 | 注释 | 所属类型 |
---|---|---|---|
max-fps | 30 | 最大fps | player |
framedrop | 5 | 跳帧开关,如果cpu解码能力不足,可以设置成5,否则会引起音视频不同步,也可以通过设置它来跳帧达到倍速播放 | player |
mediacodec | 0 | 1开启 0关闭 硬解码(硬件解码更清晰。软解,更稳定) | player |
enable-accurate-seek | 1 | 某些视频在SeekTo的时候,会跳回到拖动前的位置,这是因为视频的关键帧的问题,通俗一点就是FFMPEG不兼容,视频压缩过于厉害,seek只支持关键帧,出现这个情况就是原始的视频文件中i 帧比较少 | player |
skip_loop_filter | 0 | 环路滤波 0/8/16/24/32/48, 增强播放效率,其中48是指'AVDISCARD_ALL', 所有帧都不做环路滤波. | codec |
user-agent | Mozilla/5.0 (Linux; Android 10; MXW-AN00 Build/HONORMXW-AN00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36 Html5Plus/1.0 (具体值看真实设备的值) | User-Agent | fortmat |
dns_cache_clear | 1 | 清空DNS,有时因为在APP里面要播放多种类型的视频(如:MP4,直播,直播平台保存的视频,和其他http视频), 有时会造成因为DNS的问题而报10000问题的 | fortmat |
高阶拓展参数
一些可能用到的参数
Key | 可能设置的值 | 注释 | 所属类型 |
---|---|---|---|
soundtouch | 设置是否开启变调 1开启 0 不开启 | player | |
skip_loop_filter | 设置是否开启环路过滤,0开启,画面质量高,解码开销大,48关闭,画面质量差点,解码开销小 | codec | |
analyzemaxduration | 100L | 设置播放前的最大探测时间 | format |
analyzeduration | 设置播放前的探测时间 1,达到首屏秒开效果 | format | |
probesize | 1024*10 | 播放前的探测Size,默认是1M, 改小一点会出画面更快 | format |
flush_packets | 1 | 每处理一个packet之后刷新io上下文 | format |
max-buffer-size | 0 | 最大缓冲大小,单位kb | player |
packet-buffering | 是否开启预缓冲,一般直播项目会开启,达到秒开的效果,不过带来了播放丢帧卡顿的体验 1开启 0 不开启 | player | |
fflags | fastseek | 解决m3u8文件拖动问题 比如:一个3个多少小时的音频文件,开始播放几秒中,然后拖动到2小时左右的时间,要loading 10分钟 | fortmat |
还有一些更多的参数设置 大家可以参考 ffmpeg
和 一些网络文章
注意注意注意
ijkplayer 为开源项目,可以看得到源码,
由于`iOS`和 `Android` 的差异性,部分属性可能只在一端生效,具体支持的参数,请查看 [ff_ffplay_options.h] (https://github.com/Bilibili/ijkplayer/blob/master/ijkmedia/ijkplayer/ff_ffplay_options.h)
video 组件 高阶晋级
前言
本文是为使用了uni-app
框架开发App
时 使用video
标签 但是播放部分视频有一定特殊需求时的解决方案。
如果现有功能已经满足日常开发,可以忽略本文。
IJKMediaFramework
- 目前uni-app中 video的实现 是基于
ijkplayer
基础之上的二次封装, 框架已经设置了一些属性解决常见的问题,例如 seek不准确, http重定向跳转到rstp,https无法播放等问题。
通过 video
标签中的 advanced
可以实现对于一些高级属性的设置,下边是示例
'format','codec','sws','player' 可以设置四种, 具体设置类型 通过文章所列或者 ijkplayer,ffmpeg 相关资料查询
<video :advanced= advanced> </video>
advanced = [
{
"key": "dns_cache_clear",
"value": 1,
"type": "format",
},
{
"key": "framedrop",
"value": 1,
"type": "player",
},
{
"key": "videotoolbox",
"value": 0,
"type": "player",
}
]
uni-app iOS端 video组件的设置
框架默认参数
Key | 默认值 | 注释 | 所属类型 |
---|---|---|---|
max-fps | 30 | 最大fps | player |
framedrop | 0 | 跳帧开关,如果cpu解码能力不足,可以设置成5,否则会引起音视频不同步,也可以通过设置它来跳帧达到倍速播放 | player |
video-pictq-size | 3 | 暂无 | player |
videotoolbox | 0 | 1开启 0关闭 硬解码(硬件解码CPU消耗低。软解,更稳定) | player |
videotoolbox-max-frame-width | 960 | 指定最大宽度 | player |
enable-accurate-seek | 1 | 某些视频在SeekTo的时候,会跳回到拖动前的位置,这是因为视频的关键帧的问题,通俗一点就是FFMPEG不兼容,视频压缩过于厉害,seek只支持关键帧,出现这个情况就是原始的视频文件中i 帧比较少 | player |
auto_convert | 0 | 自动转屏开关 | fortmat |
reconnect | 1 | 重连次数 | fortmat |
timeout | 30 1000 1000 | (超时时间,timeout参数只对http设置有效。若果你用rtmp设置timeout,ijkplayer内部会忽略timeout参数。rtmp的timeout参数含义和http的不一样。) | fortmat |
user-agent | Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Html5Plus/1.0 (Immersed/20) uni-app (具体值看真实设备的值) | User-Agent | fortmat |
dns_cache_clear | 1 | 清空DNS,有时因为在APP里面要播放多种类型的视频(如:MP4,直播,直播平台保存的视频,和其他http视频), 有时会造成因为DNS的问题而报10000问题的 | fortmat |
uni-app Android端 video组件的设置
框架默认参数
Key | 默认值 | 注释 | 所属类型 |
---|---|---|---|
max-fps | 30 | 最大fps | player |
framedrop | 5 | 跳帧开关,如果cpu解码能力不足,可以设置成5,否则会引起音视频不同步,也可以通过设置它来跳帧达到倍速播放 | player |
mediacodec | 0 | 1开启 0关闭 硬解码(硬件解码更清晰。软解,更稳定) | player |
enable-accurate-seek | 1 | 某些视频在SeekTo的时候,会跳回到拖动前的位置,这是因为视频的关键帧的问题,通俗一点就是FFMPEG不兼容,视频压缩过于厉害,seek只支持关键帧,出现这个情况就是原始的视频文件中i 帧比较少 | player |
skip_loop_filter | 0 | 环路滤波 0/8/16/24/32/48, 增强播放效率,其中48是指'AVDISCARD_ALL', 所有帧都不做环路滤波. | codec |
user-agent | Mozilla/5.0 (Linux; Android 10; MXW-AN00 Build/HONORMXW-AN00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36 Html5Plus/1.0 (具体值看真实设备的值) | User-Agent | fortmat |
dns_cache_clear | 1 | 清空DNS,有时因为在APP里面要播放多种类型的视频(如:MP4,直播,直播平台保存的视频,和其他http视频), 有时会造成因为DNS的问题而报10000问题的 | fortmat |
高阶拓展参数
一些可能用到的参数
Key | 可能设置的值 | 注释 | 所属类型 |
---|---|---|---|
soundtouch | 设置是否开启变调 1开启 0 不开启 | player | |
skip_loop_filter | 设置是否开启环路过滤,0开启,画面质量高,解码开销大,48关闭,画面质量差点,解码开销小 | codec | |
analyzemaxduration | 100L | 设置播放前的最大探测时间 | format |
analyzeduration | 设置播放前的探测时间 1,达到首屏秒开效果 | format | |
probesize | 1024*10 | 播放前的探测Size,默认是1M, 改小一点会出画面更快 | format |
flush_packets | 1 | 每处理一个packet之后刷新io上下文 | format |
max-buffer-size | 0 | 最大缓冲大小,单位kb | player |
packet-buffering | 是否开启预缓冲,一般直播项目会开启,达到秒开的效果,不过带来了播放丢帧卡顿的体验 1开启 0 不开启 | player | |
fflags | fastseek | 解决m3u8文件拖动问题 比如:一个3个多少小时的音频文件,开始播放几秒中,然后拖动到2小时左右的时间,要loading 10分钟 | fortmat |
还有一些更多的参数设置 大家可以参考 ffmpeg
和 一些网络文章
注意注意注意
ijkplayer 为开源项目,可以看得到源码,
由于`iOS`和 `Android` 的差异性,部分属性可能只在一端生效,具体支持的参数,请查看 [ff_ffplay_options.h] (https://github.com/Bilibili/ijkplayer/blob/master/ijkmedia/ijkplayer/ff_ffplay_options.h)
收起阅读 »

uniapp h5打开微信小程序
官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62,必须是认证公众号。
- 到微信公众号后台配置JS接口安全域名:设置与开发 - 公众号设置 - 功能设置 - JS接口安全域名,写 www.xxx.com
- 通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信公众号APPID&secret=微信公众号APPSECRET 获取Access token
- 通过https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取ticket
- 签名生成:
①拼接string :jsapi_ticket={上面接口获取的ticket}&noncestr={随机字符串}×tamp={当前时间戳}&url={js接口安全域名(如果后面不加参数要这么写: http://www.xxx.com/ 注意最后面的/ )}
②sh1加密string得到signature
③以上步骤为后端生成,生成后返回 appId、timestamp、nonceStr、signature给前端。 - 前端安装模块 npm install jweixin-module --save
- main.js 添加一行代码 Vue.config.ignoredElements.push('wx-open-launch-weapp')
- 标签
<wx-open-launch-weapp id="launch-btn" username="公众号id" path="/pages/index/index.html"> <script type="text/wxtag-template"> <style> .btn { border-radius: 30px; width: 300px; height: 40px; font-size: 28px; border: none !important; color: #FFFFFF; background:#44ea76; } </style> <button class="btn" type="default">打开小程序</button> </script> </wx-open-launch-weapp>
js
import wx from 'jweixin-module'; onShow(){ wx.config({ debug:true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId:'', // 必填,公众号的唯一标识,填自己的! timestamp: , // 必填,生成签名的时间戳,刚才接口拿到的数据 nonceStr: '', // 必填,生成签名的随机串 signature: '', // 必填,签名 jsApiList: ['wx-open-launch-weapp'], openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填 }); }
要在js安全域名上并且在真机上访问才有效果,如果没效果或者是有错误的弹窗出现说明wx.config配置不正确,这种方式只能在微信网页里才能用!!
外部浏览器h5打开微信小程序方法:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
1.通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信小程序APPID&secret=微信小程序APPSECRET 获取Access token
2.通过POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 获取到URL Scheme
- 通过location.href = 'weixin://dl/business/?t=接口取到' 调用就可以。h5好像是要https才能打开~
官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62,必须是认证公众号。
- 到微信公众号后台配置JS接口安全域名:设置与开发 - 公众号设置 - 功能设置 - JS接口安全域名,写 www.xxx.com
- 通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信公众号APPID&secret=微信公众号APPSECRET 获取Access token
- 通过https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取ticket
- 签名生成:
①拼接string :jsapi_ticket={上面接口获取的ticket}&noncestr={随机字符串}×tamp={当前时间戳}&url={js接口安全域名(如果后面不加参数要这么写: http://www.xxx.com/ 注意最后面的/ )}
②sh1加密string得到signature
③以上步骤为后端生成,生成后返回 appId、timestamp、nonceStr、signature给前端。 - 前端安装模块 npm install jweixin-module --save
- main.js 添加一行代码 Vue.config.ignoredElements.push('wx-open-launch-weapp')
- 标签
<wx-open-launch-weapp id="launch-btn" username="公众号id" path="/pages/index/index.html"> <script type="text/wxtag-template"> <style> .btn { border-radius: 30px; width: 300px; height: 40px; font-size: 28px; border: none !important; color: #FFFFFF; background:#44ea76; } </style> <button class="btn" type="default">打开小程序</button> </script> </wx-open-launch-weapp>
js
import wx from 'jweixin-module'; onShow(){ wx.config({ debug:true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId:'', // 必填,公众号的唯一标识,填自己的! timestamp: , // 必填,生成签名的时间戳,刚才接口拿到的数据 nonceStr: '', // 必填,生成签名的随机串 signature: '', // 必填,签名 jsApiList: ['wx-open-launch-weapp'], openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填 }); }
要在js安全域名上并且在真机上访问才有效果,如果没效果或者是有错误的弹窗出现说明wx.config配置不正确,这种方式只能在微信网页里才能用!!
外部浏览器h5打开微信小程序方法:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
1.通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信小程序APPID&secret=微信小程序APPSECRET 获取Access token
2.通过POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 获取到URL Scheme
- 通过location.href = 'weixin://dl/business/?t=接口取到' 调用就可以。h5好像是要https才能打开~

nPro 高质量的全端组件与模版库~支持nvue~vue3纯组合式API来袭
基于nvue的全端组件与模版库
从nvue最开始到现在,从mypUI开源到现在。
我们从最初的磕磕碰碰开始,到第一个开源的nvue组件库mypUI,经历过数次的优化与迭代,经历过众多项目的实践与打磨。21年6月,我们终于放出了超级优秀的nvue组件与模版库:nPro。
nPro坚定的理念就是:只需熟悉一次,然后越用越快,越用越好。
我们的目标是囊括各行各业各种场景下的设计和模版。让你能够快速的去实现或者学习自己想要的效果。
nPro只会越来越优秀,现在的价格绝对物超所值:一顿饭钱,不仅获得优秀的技术与良好的性能,更有一群共同进步的朋友。
最后把我经常说的一句话送给大家:
去用,去实现,去完成!
祝大家越来越优秀,发大财!nPro用起来!
教学视频
功能与新功能体验
关注视频号:马三又的又,接收新的功能提醒:
部分示范
小程序体验
基于nvue的全端组件与模版库
从nvue最开始到现在,从mypUI开源到现在。
我们从最初的磕磕碰碰开始,到第一个开源的nvue组件库mypUI,经历过数次的优化与迭代,经历过众多项目的实践与打磨。21年6月,我们终于放出了超级优秀的nvue组件与模版库:nPro。
nPro坚定的理念就是:只需熟悉一次,然后越用越快,越用越好。
我们的目标是囊括各行各业各种场景下的设计和模版。让你能够快速的去实现或者学习自己想要的效果。
nPro只会越来越优秀,现在的价格绝对物超所值:一顿饭钱,不仅获得优秀的技术与良好的性能,更有一群共同进步的朋友。
最后把我经常说的一句话送给大家:
去用,去实现,去完成!
祝大家越来越优秀,发大财!nPro用起来!
教学视频
功能与新功能体验
关注视频号:马三又的又,接收新的功能提醒:
部分示范
小程序体验