网站建设的经验总结建设网站需要买什么

当前位置： 首页 > news >正文

网站建设的经验总结,建设网站需要买什么,平面设计培训多少钱 贵吗,手机百度下载app背景#xff1a;企业微信应用使用企业微信JS-SDK的分享接口实现分享样式自定义 原生#xff1a; 需要实现成#xff1a; 企业微信JS-SDK 是企业微信面向网页开发者提供的 基于企业微信内 的网页开发工具包。 通过使用企业微信JS-SDK#xff0c;网页开发者 可借助企业微信…背景企业微信应用使用企业微信JS-SDK的分享接口实现分享样式自定义 原生 需要实现成 企业微信JS-SDK 是企业微信面向网页开发者提供的 基于企业微信内 的网页开发工具包。 通过使用企业微信JS-SDK网页开发者 可借助企业微信 高效地使用拍照、选图、语音、位置等手机系统的能力同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力为企业微信用户提供更优质的网页体验。 传送门企微JS-SDK开发文档 目录 步骤一引入JSSDK步骤二通过config接口注入权限验证配置注意点 url的赋值 步骤三封装分享api注意点每次调用api都需要重新注册一遍 步骤四监听转发按钮 步骤一引入JSSDK !– 这里以jssdk1.2.0为例子在html文件里引入jssdk – script srchttps://res.wx.qq.com/open/js/jweixin-1.2.0.js/script步骤二通过config接口注入权限验证配置 // 示例 wx.config({beta: true,// 必须这么写否则wx.invoke调用形式的jsapi会有问题debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。appId: , // 必填企业微信的corpID必须是本企业的corpID不允许跨企业使用timestamp: , // 必填生成签名的时间戳nonceStr: , // 必填生成签名的随机串signature: ,// 必填签名见 附录-JS-SDK使用权限签名算法jsApiList: [] // 必填需要使用的JS接口列表凡是要调用的接口都需要传进来 });这里的config里的内容一般是请求后端获取举个例子 新建一个qwjssdk.ts文件或js文件这里以Typescript为例JavaScript类似。 提前将需要用到的api用一个数组存起来 const defaultApiSet new Set([onMenuShareAppMessage, // 获取“转发”按钮点击状态及自定义分享内容接口 ]) /*** [getBrowserEnv 判断当前浏览器的环境可忽略]* return {[Object]}/ function getBrowserEnv(): {isWxWork: boolean, wxWorkVersion: string | null} {const ua navigator.userAgent.toLowerCase()const isWxWork /wxwork/i.test(ua) /micromessenger/i.test(ua)// 获取企业微信版本let wxWorkVersion nullif (ua.match(/wxwork\/(\S)\s/)) {wxWorkVersion (ua.match(/wxwork\/(\S)\s/) as object)[1]}return {isWxWork,wxWorkVersion} }定义一个方法调用签名接口和注册配置信息 getParams是请求后端接口获取签名返回来的参数可以与配置信息对应上即可一般返回appId、timestamp、noncestr、signature。具体可阅读JS-SDK使用权限签名算法。 注意点 url的赋值 为什么 url赋值 要使用encodeURIComponent() 因为有个业务场景需要带值为中文的请求参数所以这里需要先编码再把url传给签名接口否则不会走分享api。这里因项目而异。没有作者这个业务场景的话可以直接将url赋值为window.location.href.split(#)[0]
// 请求接口获取参数 async getParams() {const url encodeURIComponent(window.location.href.split(#)[0]) // 注意点因项目而已const res await Api.getJssdkConfig({ launchUrl: url }) // 请求自己定义接口的方法if (res.code.value 0) {return new Promise((resolve, reject) {resolve(res.data.value)})}} async initConfig() {const config:any await this.getParams() if (!config) {console.log(签名失败)return false}config.jsApiList Array.from(defaultApiSet) // 将需要用到的api赋值给confi.JsAPIListawait this.registeredConfig(config) // 去注册将注册信息带到注册配置方法里面 }注册配置信息 // 注册配置信息 registeredConfig(config) {console.log(registeredConfig config: , config);window.wx.config({// 必须这么写否则wx.invoke调用形式的jsapi会有问题beta: true,// 开启调试模式debug: false,// 必填企业微信的corpIDappId: config.appId,// 必填生成签名的时间戳timestamp: config.timestamp,// 必填生成签名的随机串nonceStr: config.noncestr,// 必填签名见 附录-JS-SDK使用权限签名算法signature: config.signature,// 必填需要使用的JS接口列表凡是要调用的接口都需要传进来jsApiList: config.jsApiList})return new Promise((resolve, reject) {// 如果是企业微信端的情况下执行浏览器的情况下走else。不判断的话可忽略此判断。此方法在上面已经写了。if (getBrowserEnv().isWxWork) {window.wx.ready(() {console.log(注册成功, config)// config信息验证后会执行ready方法所有接口调用都必须在config接口获得结果之后config是一个客户端的异步操作所以如果需要在页面加载时就调用相关接口则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口则可以直接调用不需要放在ready函数中。resolve(null)})window.wx.error(err {// config信息验证失败会执行error函数如签名过期导致验证失败具体错误信息可以打开config的debug模式查看也可以在返回的res参数中查看对于SPA可以在这里更新签名。console.log(注册失败, err, config)reject(err)})} else {resolve(null)}})}步骤三封装分享api 在公共方法文件里面封装分享方法的调用。 这里就命名一个common.ts文件为例吧。 注意点每次调用api都需要重新注册一遍 每次调用api之前都需要调用前面写的initConfig()重新注册一遍配置信息。否则分享的样式比如title、desc、imgUrl都会不生效。 // 引入qwjssdk文件路径自己决定 import qwjssdk from ~/utils/qwjssdk /** 通过调用jssdk能力自定义分享内容* / export const wxShareAppMessage async (shareObj: shareObj) {await qwjssdk.initConfig() // 重点这里根据业务需求需要每次更换路由都需要重新注册一遍否则分享出去的样式不生效。if (!window.wx) {return}// 获取“转发”按钮点击状态及自定义分享内容接口window.wx.onMenuShareAppMessage({title: shareObj.title, // 分享标题desc: shareObj.desc, // 分享描述link: shareObj.link, // 分享链接imgUrl: shareObj.imgUrl, // 分享图标success: function () {// 这里可以写分享成功之后的逻辑console.log(SUCCESS onMenuShareAppMessage : , shareObj);},error: (err){// 这里可以写分享失败之后的逻辑console.log(ERR onMenuShareAppMessage : , err);}}); }这里只用到了success 和 error 的回调其他回调可以看下面这段官网的描述 所有接口通过wx对象(也可使用jWeixin对象)来调用参数是一个对象除了每个接口本身需要传的参数之外还有以下通用参数 success接口调用成功时执行的回调函数。 fail接口调用失败时执行的回调函数。 complete接口调用完成时执行的回调函数无论成功或失败都会执行。 cancel用户点击取消时的回调函数仅部分有用户取消操作的api才会用到。 trigger: 监听Menu中的按钮点击时触发的方法该方法仅支持Menu中的相关接口。 注意 不要尝试在 trigger 中使用 Ajax 异步请求修改本次分享的内容因为客户端分享操作是一个同步操作这时候使用 Ajax 的回包会还没有返回。 以上几个函数都带有一个参数类型为对象其中除了每个接口本身返回的数据之外还有一个通用属性err_msg其值格式如下 调用成功时“xxx:ok” 其中xxx为调用的接口名 用户取消时“xxx:cancel”其中xxx为调用的接口名 调用失败时其值为具体错误信息 步骤四监听转发按钮 在业务代码里面引入封装的api这里就以index.vue举例叭 import { wxShareAppMessage } from ~/utils/common /** 调用分享api实现分享自定义内容*/ const toShare () {shareData.value {title: 搜索,desc: 搜索,link: window.location.href,imgUrl: xxxxxxxxx.png}wxShareAppMessage(shareData.value) }toShare() // 根据自身的业务逻辑调整请求位置执行上面代码就代表着开始监听转发按钮了。 快去尝试叭~