微信公众号开发总结
来源：互联网 发布：战地4网络对战 编辑：程序博客网 时间：2024/06/01 22:04
使用vue-cli
1、将vue的spa单页面修改成多入口文件
直接在vue的脚手架的webpack上面进行修改，参考别人博客进行修改，分享自：
http://blog.csdn.net/embrace924/article/details/78316132
测试打包后可以生成多入口文件，但是第二个入口文件，打开会有一部分问题，项目赶紧，之后就没用多页面，使用参数区分跳转的（后来发现应该是nginx配置问题：
location / { try_files
index index.html;
}）
2、打包后页面无法刷新、部分静态图片加载不到
页面无法刷新，首先就是在检查中查看Network，看一下引入的静态资源路径加载的问题，如果加载错误可能是config/index.js下build配置下assetsPublicPath: ‘./’,的问题，第二种就是通过服务端配置nginx重定向的问题，两种都是资源路径加载不到
3、使用诸葛io埋点
公司会有诸葛账号，将数据接入中的script的内容粘贴到代码中，需要埋点的地方直接事件埋点即可，window.zhuge.load(”);//配置应用的AppKey可以实时调试
4、微信分享
执行wx.ready()之前一定需要先通过签名配置，签名是前端传递当前url给后台，后台按照规则生成返回，为了安全性，当url后面带有参数时，保险起见使用：encodeURIComponent()对当前url进行转码，因为请求原因后台不识别&，如果没有参数直接使用window.location.href.split(‘#’)[0]
const commonJs = { WXjssdk: function (self,status) {//微信基础配置 let obj = {} let postUrl = null; //分享其他页面签名 if(window.location.href.indexOf('?')!=-1){ postUrl = encodeURIComponent(window.location.href); }else{ postUrl = window.location.href.split('#')[0]; } Indicator.open() let wxUrl = null; wxUrl = successService.cafinJsGetConfigO('url='+postUrl); wxUrl.then((response) => { let responseData = response.data; if (responseData.code == '0000') { window.localStorage.setItem('appId',responseData.data.appId); let configParam = { //debug: true, appId: responseData.data.appId, // 必填，公众号的唯一标识 timestamp: responseData.data.timestamp, // 必填，生成签名的时间戳 nonceStr: responseData.data.nonceStr, // 必填，生成签名的随机串 signature: responseData.data.signature,// 必填，签名，见附录1 jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 } wx.config(configParam); wx.error(function (res) { Indicator.close() // MessageBox.alert(JSON.stringify(res)).then(() => { // }) console.log('error') }); if(!status){ Indicator.close() } } }) // }); }, /** * @param self 当前指向 必传 * @param title 分享的名字 必传 * @param contentpage 分享的内容 必传 * @param page 分享后跳转到哪个页面及参数 必传 * @param logopng 分享的LOGO 必传 * @param jssdkStorage 分享时缓存的名字 不允许重复，必传 * @param status 是否自动关闭加载框，不传或false时自动关闭 * @constructor */ WXShareConfig: function (self,title,contentpage,page,logopng,jssdkStorage,status) {//分享到朋友圈和好友 let wxjssdkNum = parseInt(window.sessionStorage.getItem(jssdkStorage))||0; let u = navigator.userAgent; let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isiOS){ if(wxjssdkNum<1){ window.location.reload() wxjssdkNum = wxjssdkNum+1; window.sessionStorage.setItem(jssdkStorage,wxjssdkNum); } } if(status){ this.WXjssdk(self,status); }else{ this.WXjssdk(self); } let appId = null; if(self.$route.query.appId){ appId = self.$route.query.appId; }else{ appId = window.localStorage.getItem('appId'); } Indicator.open(); wx.ready(function (res) { let hosturl = window.location.href.split('/')[2]; let hostStatus = window.location.href.split('/')[0]; let linkUrl = `${hostStatus}//${hosturl}/${page}`; let logoUrl = hostStatus + '//' + hosturl + logopng Indicator.close(); wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: contentpage, // 分享描述 link: `${hostStatus}//${hosturl}/${page}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: hostStatus + '//' + hosturl + logopng, // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 // MessageBox.alert(' 分享成功！').then(() => { // }) console.log('分享成功！') }, cancel: function () { // 用户取消分享后执行的回调函数 $.toast('用户已取消','text'); } }); wx.onMenuShareTimeline({ title: title, // 分享标题 desc: contentpage, // 分享描述 link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: logoUrl, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 // MessageBox.alert(' 分享成功！').then(() => { // }) console.log('分享成功') }, cancel: function () { // 用户取消分享后执行的回调函数 $.toast('用户已取消','text'); } }); }) wx.checkJsApi({ jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} if(res.errMsg.indexOf('ok')==-1){ MessageBox.alert(JSON.stringify(res)).then(() => { }) } } }); wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 MessageBox.alert(JSON.stringify(res)).then(() => { }) }); }}export default commonJs 5、遮罩层弹出后，页面还可以滑动
在遮罩层标签内添加 @touchmove.prevent
6、模拟ios弹出input搜索框自动获取焦点弹出键盘，给某个input（这里是input1）添加事件，当事件执行，弹出搜索input（这里是input2），在input1的事件中添加一个50ms的延时，让input1失去焦点，input2获取焦点，此时弹出的键盘其实是input1的，我们将他模拟给了input2
移动端给input添加focus事件：$(‘#input’).trigger(“click”).focus();
7、微信图片预览接口调用
import wx from 'weixin-js-sdk'const imgPreview = { funcReadImgInfo(){ var imgs = []; var imgObj = $(".content img");//这里改成相应的对象 for(var i=0; i<imgObj.length; i++){ imgs.push(imgObj.eq(i).attr('src')); imgObj.eq(i).click(function(){ var nowImgurl = $(this).attr('src'); wx.previewImage({ "urls":imgs, "current":nowImgurl }); }); } }}export default imgPreview8、敏感字过滤
const sensitive = { senCharFilter(charaRoom){ let sensitiveWordsList = [];//敏感字数组 let sensitiveWords = ""; let reBadWords = null; for(var i=0;i<sensitiveWordsList.length;i++){ if(i<sensitiveWordsList.length-1){ sensitiveWords += sensitiveWordsList[i]+"|"; }else{ sensitiveWords += sensitiveWordsList[i]; } }; // 拼接敏感字正则 return charaRoom.replace(new RegExp(sensitiveWords,'gi'),'*'); }}export default sensitive阅读全文
