uniapp开发公众号教程(uniapp 公众号开发)
今天给各位分享uniapp开发公众号教程的知识,其中也会对uniapp 公众号开发进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、2020-11-30 uni开发 公众号微信分享
- 2、uniapp使用微信小程序云开发
- 3、uni-app中使用微信js-sdk(个人笔记)
- 4、uniApp实现企业公众号oauth2静默授权登录H5前端部分
2020-11-30 uni开发 公众号微信分享
1.配置信息
2.引入sdk微信模块,命名jweixin-module.js
2.提取调用微信分享的共通 (wechat.js)
3.main.js注入微信共通js
4.调用微信分享方法(这里分享的链接不是当前访问的页面)
最后分享成功
uniapp使用微信小程序云开发
步骤
1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config
打开终端运行 npm 安装版本
npm install copy-webpack-plugin@5.0.0
需要5.0版本,高版本Uniapp不支持
2、创建你自己云函数目录文件。我设置的:
wxcloud/cloudfunctions
3、修改manifest.json
在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下
3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝(后续你可用创建函数文件就会拷贝了)。
uni-app中使用微信js-sdk(个人笔记)
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
例子为在vue中使用微信JS-SDK,步骤如下:
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
插件方式:
引入js文件方式:
在需要调用JS接口的页面引入如下JS文件,(支持https):
挂载到Vue原型
与使用 JS-SDK 配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个 url 仅需调用一次)。开放标签的申请和 JS 接口的申请相互独立,因此是可以同时申请的。
配置成功之后,就可以使用相关的api了。例子为微信支付。
uniApp实现企业公众号oauth2静默授权登录H5前端部分
appid,服务器域名(域名下的资源文件要能访问,跟后端沟通,先放个html文件进去,比如: 能访问到)
企业H5应用工作台 可信域名配置 找管理员扫码登录 还有 应用主页配置
// 存
function setCookie(key, value) {
var initDate = new Date();
initDate.setTime(initDate.getTime() + 30 * 60 * 1000);
document.cookie = key + "=" + value + ";expires=" + initDate.toGMTString() + ";path=/";
}
// 取
function getCookie(key) {
if (document.cookie.length 0) {
var i = document.cookie.indexOf(key + "=")
if (i != -1) {
i = i + key.length + 1
var end = document.cookie.indexOf(";", i)
if (end == -1) end = document.cookie.length
return unescape(document.cookie.substring(i, end))
}
}
return undefined
}
//删
function removeCookie(key) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var val = getCookie(key);
if (val != null) {
document.cookie = key + "=" + val + ";expires=" + exp.toGMTString();
}
}
export const Cookie = {
set: setCookie,
get: getCookie,
remove: removeCookie
}
import { Cookie } from "@/utils/cookie.js";
created() {
let local = 'http:xxxx.com/index.html'; // 这个是如果没有code需要配合微信重定向获取code的页面,也就是你后端放静态资源文件的路径,一定要可以访问到
if (!Cookie.get("weCode")) {
window.location.href =
"" +
'企业号的appid' +
"redirect_uri=" + encodeURIComponent(local) +
"response_type=codescope=snsapi_userinfowechat_redirect";
} else {
uni.reLaunch({
url: '/pages/index'
});
}
}
import { Cookie } from "@/utils/cookie.js"
onLaunch: function() {
this.getCode()
},
getCode() {
let weCode = this.getUrlParam("code"); //查看code是否存在
if (weCode) {
Cookie.set("weCode", weCode)
getUserInfo({ // 这个是请求接口把code 给后台,然后后台给你用户的一些信息 getUserInfo不要照抄 这是一个请求方法
code: weCode
}).then(res = {
if (res.data.code == 200) {
Cookie.set('userId', res.data.data)
}
})
}
},
//判断code信息是否存在
getUrlParam(name) {
var reg = new RegExp("(^|)" + name + "=([^]*)(|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
{
"pages": [
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "微信授权",
"navigationStyle": "custom",
"app-plus": {
"titleView": false,
"animationType": "none"
}
}
},{
"path": "pages/index",
"style": {
"navigationBarTitleText": "小测试首页",
"navigationStyle": "custom",
"app-plus": {
"titleView": false
}
}
}
],
"tabBar": {
"list": [{
"pagePath": "pages/index",
"iconPath": "static/tabIndexOff.png",
"selectedIconPath": "static/tabIndexOn.png",
"text": "首页"
}]
比如 你就写 baidu.com
比如: 端口 你就写 ms:xxx:7000
记得看微信官方文档!!!
贴出你需要看的链接:
uniapp开发公众号教程的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于uniapp 公众号开发、uniapp开发公众号教程的信息别忘了在本站进行查找喔。
-
上一篇
小程序开发整理(小程序开发设计) -
下一篇
清远专业网站优化排名(专业的网站优化)