1.微信小程序一些常用标签与html的对应关系
HTML
微信小程序
<div></div>
<view></view>
<h1></h1>...<h6></h6>
<p></p><span></span>
<view></view>
<i class="icon">
<icon></icon>
<iput type="text">
<iput type="checkbox">
<iput type="radio">
<iput type="file">
<input/>
<checkbox/>
<radio/>
<view bindtab="chooseImage">
<a href="#"></a>
<navigator url="#" redirect></navigator >
<img src="">
<image src="" ></image >
1. 匹配搜索关键词高亮
（1）这个方法是用父子组件传值做的，先把后台返回来的数据存到data中，
父组件为 子组件为像如下代码所示：
<articleComponent wx:for='{{searchNewPostList}}' ymd="{{ymd}}" wx:key='postId' wx:if="{{index<2}}" detail='{{item}}' keyword="{{words}}">
（2）在子组件的properties中接收父组件传过来的值
properties:{
keyword: {
type: Array,
value: []
},
然后在子组件的ready生命周期中进行处理
ready: function () {
this.setData({
title: this.data.detail.title||'',
programName: this.data.detail.specialColumnNameList||[],
sortName: this.data.detail.originColumnNameList||[],
tagName: this.data.detail.tagNameList||[],
})
var title = this.data.title
var programName = this.data.programName
var sortName = this.data.sortName
var tagName = this.data.tagName
if (this.data.keyword.length > 0) {
this.data.keyword = this.data.keyword.reverse()
this.data.keyword.forEach((word) => {
var regExp = new RegExp(word, 'g')
title = title.replace(regExp, '<span style="color:#ff8022">' + word + '</span>') tagName = tagName.map((val,key)=>{ return val.replace(regExp, '<span style="color:#ff8022">' + word + '</span>') }) programName = programName.map((val,key)=>{ return val.replace(regExp, '<span style="color:#ff8022">' + word + '</span>') }) sortName = sortName.map((val,key)=>{ return val.replace(regExp, '<span style="color:#ff8022">' + word + '</span>') }) })
this.setData({
title: title,
programName: programName,
sortName: sortName,
tagName: tagName
})
}
}
然后在页面中进行判断
<view class="tagItem-box" wx:if="{{detail.originColumnNameList.length}}">
<text class="tagItem" wx:if='{{keyword.length == 0}}'>{{detail.originColumnNameList[0]}}</text>
<rich-text class="tagItem inlineBlock" wx:if="{{keyword.length != 0&&sortName}}" nodes="{{sortName[0]}}"></rich-text>
<text class="tagLine">/</text>
</view>
2、使用tortoiseSVN查看修改日志show log
3、js将常规数字格式转换为千分位形式输出
function format_number(n) {
var b = parseInt(n).toString();
var len = b.length;
if (len <= 3) {
return b;
}
var r = len % 3;
return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
}
let num=[1,22,333,4444,5555,6666,76555];
num.forEach((val,index)=>{
console.log(format_number(val))
})
//打印出来：1,22,333,4,444,5,555,6,666,76,555
4、
const route = getCurrentPages()[0].route;//当前页面url
const options = JSON.stringify(getCurrentPages()[0].options);//获取url中所带的参数可以查看options
wx.redirectTo({ url: `../../pages/login/login?urlto=../../${route}&other=${options}`,})
5、正则表达式
/^$/：完整表达式
^：表示以什么开始，或者取反
$：结束
^[A-Za-z_]：以字母开始，无论大小都可以
[^A-Za-z_]：非字母就可以
[A-Za-z0-9_]：可以是字母数、字下、划线
{5,15}：可以包含6到16个字符
console.log(app.globalData.systemInfo.system) //iOS 10.0.1
console.log(app.globalData.systemInfo.system.match(/[a-zA-Z]+/))
console.log(app.globalData.systemInfo.system.match(/[a-zA-Z]+/)[0])//iOS
console.log(app.globalData.systemInfo.system.match(/[0-9].*/))
console.log(app.globalData.systemInfo.system.match(/[0-9].*/)[0])//10.0.1
6、前端安全 JavaScript防XSS攻击
XSS，垮站脚本攻击，是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本注入式攻击。本来缩小应该是CSS，允许攻击者 为了和层叠样式（Cascading Style Sheet,CSS）有所区分），故称是XSS。
if (JSON.stringify(res).indexOf('<') > -1 || JSON.stringify(res).indexOf('>') > -1) { res = JSON.parse(JSON.stringify(res).replace(/(<)/g, '<').replace(/(>)/g, '>'));}//自定义 HTML 转义函数
7、小程序-腾讯视频插件的使用
app.json文件：
"plugins": {
"tencentvideo": {
"version": "1.2.5",
"provider": "wxa75efa648b60994b"
}
使用插件的页面的json文件中
{
"navigationBarTitleText": "腾讯插件的使用",
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}
}
使用插件的页面的wxml文件夹中：
<view class="video">
<txv-video class="txv-video" playerid="txv1" vid="w0718gzpyqm" autoplay="true"></txv-video>
</view>
8、calc()函数的用法（CSS）用于动态计算长度值
（1）需要注意的是，运算符前后都需要一个空格（运算符指的是+ - * /）
（2）任何长度值都可以使用calc()函数进行计算
（3）calc()函数支持"+" "-" "*" "/"
（4）calc()函数使用标准的数学运算优先级规则
//在css中写法
<view class='top-bar' style='height:calc(84rpx + {{statusBarHeight}}px);padding-top:{{statusBarHeight}}px;
background:{{bgColor?bgColor:"#fff"}}'>
//在js中写法
let statusBarHeight=app.globalData.statusBarHeight+'px';//获取状态栏
this.setData({
positionTop:`top: calc(${statusBarHeight} + 84rpx)` //ES6语法
})
9、阿拉丁开发文档介绍
doc.aldwx.com/mini-progra… //阿拉丁帮助文档
需要点击下载微信小程序SDK，并将下载的文件解压，将解压后的文件 ald-stat.js 和 ald-stat-conf.js 复制到小程序根目录的 utils 文件夹中，
然后进行配置
10、wxParse（微信小程序富文本解析组件）
1、copy文件夹wxparse
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)
2/引入必要文件
//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";
var article = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
模板引用
// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
11、小程序点击指定地址按钮直接打开地图导航
getLocation:function(){
wx.getLocation({
type: 'wgs84',
success: function (res) {
wx.openLocation({//使用微信内置地图查看位置。
latitude: 31.0938140000,//要去的纬度-地址
longitude: 121.5039390000,//要去的经度-地址
name: "O'MALL华侨城商业中心",
address: '华侨城商业中心'
})
}
})
12、返回上一页刷新上一页的数据
**第一种方法：**在返回A页面的时候调用A的页面onShow()方法，重新查询加载一次A页面即可，代码为：
onShow:function(){
this.onLoad();
}
**第二种方法：**在B页面中进行操作的时候就在后台刷新A页面，当返回A页面的时候就不需要再刷新加载A页面了。具体步骤分两步：
（1）在父页面中添加刷新数据的方法：
changeData:function(){
this.onLoad();//最好是只写需要刷新的区域的代码，onLoad也可以，效率低，有点low
}
（2）在子页面中添加方法，并且在需要的地方进行调用
changeParentData:function(){
let pages=getCurrentPages();//当前页面栈
if(pages.length>1){
let beforePage=pages[pages.length-2];//获取上一个页面实例对象
beforePage.changeData();//触发父页面中的方法
}
wx.navigateBack({
delta:1
)}
}
返回上一页更新上一页的内容
let pages=getCurrentPages();
if(pages.length>1){
let prePage=pages[pages.length-2];
prePage.onL
*********
let pages=getCurrentPages();//获取当前页面栈
let prevPage=pages[pages.length-2];//获取上一个页面实例对象
prevPage.data.loginRefresh=true;
wx.navigateBack({
detal:1
)}
14、常用的插件
wxParse:富文本解析（github.com/icindy/wxPa…
wx-charts：图表工具（github.com/xiaolin3303…
13、带多个值到下一页的写法
wx.navigateTo({
url:'/pages/index/indexDetail?jsonStr='+str+'&strr='+_str
})
ES6的写法：
wx.navigateTo({ url: `../modelSearchPage/modelSearchPage?keyword=${keyword}&userId=${this.data.userId}&forumId=${this.data.forumId}`})
14、后端返回来base64，base64转换成图片
//通过小程序自带方法将base64转为二进制去除特殊符号
val.img=wx.base64ToArrayBuffer(val.img)
//转回base64 val.img=wx.arrayBufferToBase64(val.img)
//拼接请求头，data格式可以为image/png或者image/ipeg等，看需求 val.img='data:image/png;base64,'+val.img
14、处理
var count = 0
var arr = []//把abc附在arr里
var arrdata=['选项一','选项二']
var newarr=[]
for (var i = 65; i < 91; i++) {
arr[count] = String.fromCharCode(i)
count++
}
for(var i = 0; i < arrdata.length; i++){
if(i<26){
newarr.push({
[arr[i]]:arrdata[i]
})
}else{
newarr.push({
[arr[i%26]]:arrdata[i]
})
}
}
var arrdata=['选项一','选项二']
var newarr=[]
for(var i = 0; i < arrdata.length; i++){
newarr.push({
'testoption':arrdata[i]
})
}
14、调后端接口时返回来的bug的判断原因
1、接入微信授权提示{“errcode”:40125,"errmsg":"invalid appsecret,view more at"}
（1）代码中设置的微信APPsecret和微信开发平台不一致，需要您对照微信公众平台和代码中的appsecret检查修正
（2）由于秘钥无效导致的，秘钥如果长时间不登录，会自动重置
解决办法：重置秘钥，更换成重置后的秘钥，即可解决
15、throw new Error()真实的用法和throw error的却别
throw new Error();//这个是创建错误，创造一个错误类型抛出
throw error //这个是抛出错误
16、百度地图地图坐标转腾讯地图坐标
百度地图的金纬度算法是百度自己搞了一套标准，其他的地图都用的一个标准
百度地图经纬度转腾讯地图经纬度
function bMapTransQQMap(lng,lat){
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs,
lat: lats
}
}
腾讯地图经纬度转百度地图经纬度
function qqMapTransBMap(lng,lat){
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng;
let y = lat;
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta) + 0.0065;
let lats = z * Math.sin(theta) + 0.006;
return {
lng:lngs,
lat:lats
}
}
17. 排查异常的方法
在使用wx.request接口我们会经常遇到无法发起请求或者服务器无法收到请求的情况，我们罗列排查这个问题的一般方法：
- 检查手机网络状态以及wifi连接点是否工作正常。
- 检查小程序是否为开发版或者体验版，因为开发版和体验版的小程序不会校验域名。
- 检查对应请求的HTTPS证书是否有效，同时TLS的版本必须支持1.2及以上版本，可以在开发者工具的console面板输入showRequestInfo()查看相关信息。
- 域名不要使用IP地址或者localhost，并且不能带端口号，同时域名需要经过ICP备案。
- 检查app.json配置的超时时间配置是否太短，超时时间太短会导致还没收到回报就触发fail回调。
- 检查发出去的请求是否302到其他域名的接口，这种302的情况会被视为请求别的域名接口导致无法发起请求。
18.渲染数据
<view class="menu-container"> <view class="menu-box" wx:for="{{iconList}}" > <view class="sub-title">{{index}}</view><view class="cu-list grid col-3" > <view class="cu-item" wx:for="{{iconList[index]}}" style="width:33.3%;"> <view class="iconfont icon-{{item.icon}} text-blue" bindtap="gotoZddwList" data-hylb="{{item.hylb}}"> <view class="cu-tag badge" wx:if="{{item.badge!=0}}"> <block wx:if="{{item.count!=1}}">{{item.count>99?"99+":item.count}}</block> </view> </view> <text>{{item.name}}</text> </view></view></view></view>
19、微信小程序用setData修改数组或对象中的一个属性值
（1）setData修改一个对象的属性值
//把对应的成员变量作为一个字符串用方括号[]包裹起来，作为一个变量 ['object.age']被赋值，则就修改成功
Page({
data: {
object:{
name: '意儿',
age: 14,
school: '广州商学院'
} },
onLoad: function (options) {
let newName='文'
this.setData({
['object.age']: newName
})
console.log(object)
},
})
（2）setData修改数组的属性值
let arr=[ { name:'意儿', age:12 }, { name:'分钟', age:15, }]
this.setData({
["arr[" + (index) + "].name"]:'分钟'
})
5、小程序使用scroll-view的一个bug总结
要是显示文字超过两行的不能用white-space:nowrap;强制在同一行显示所有文本，直到文本结束或者遭遇br标签对象才换行。
<scroll-view scroll-x class="scroll_view_H" style="width:100%">
<view class="small-box>
<view class="article_item scroll_view_item_H">
</view>
</view>
</scroll-view>
.scroll_view_H{
height: 240rpx;
box-sizing: border-box;
overflow: hidden;
}
.small-box{
width: 100%;
overflow-x: scroll;//没有这个也行
overflow-y: hidden;//没有这个也行
display: flex;
}
****好像只要设display:flex就OK了，每个设width宽度
19、微信小程序上线缓存及解决办法
小程序在更新迭代版本之后，我们要是之前已经在手机打开过得话，再重新打开经常会有一个问题，就是我们迭代的功能不能立即使用，在你手机上显示的版本还是之前的版本，此时我们或许会有疑问，我的新版本明明已经上线了，为什么手机上还没显示，其实这就涉及到一个小程序的缓存问题。一般情况下，我们只需要把小程序删除，再重新打开就可以了，但是这种体验明显不是太好，尤其是对于用户来说，有没有什么比较好的解决办法呢？当然是有的，解决办法如下：
把下面这段代码放在app.js里面的onshow里
upDataApp: function () {
//版本更新
if (wx.canIUse('getUpdateManager')) {
//判断当前微信版本是否支持版本更新
const updateManager = wx.getUpdateManager();
updateManager.onCheckForUpdate(function (res) {
if (res.hasUpdate) { // 请求完新版本信息的回调
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
} } }) });
updateManager.onUpdateFailed(function () {
wx.showModal({// 新的版本下载失败
title: '已经有新版本了哟~',
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~', }) }) } })
} else { wx.showModal({// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) }
}
20、滑动到相对应的地方
<view class="hf-box" id="move1"></view>
let scrollTop=this.data.customBar+this.data.topHeight; const query=wx.createSelectorQuery(); query.exec((res)=>{ console.log(res) scrollTop=res[0].scrollTop }) query.select('#move1').boundingClientRect(res => { console.log("距顶部的距离：",scrollTop ," move1距当前页面的距离：",res.top); //wx.pageScrollTo() 将页面滚动到目标位置 //scrollTop:滚动到页面的目标位置，单位 px //duration:滚动动画的时长，单位 ms wx.pageScrollTo({ scrollTop: scrollTop + res.height, duration: 0 }) }).exec();
20、腾讯位置服务
1、申请开发者密钥（key）:申请密钥
2、考酮
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');var qqmapsdk;
getLocation(){ let that=this;// qqmapsdk = new QQMapWX({ key: '' }); wx.getLocation({ type: 'gcj02', //返回可以用于wx.openLocation的经纬度 success: (res) => { let latitude = res.latitude; let longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, success: function (addressRes) { var address = addressRes.result.address; that.setData({ ['formObj.dz']: address, ['formObj.jwd']: res.longitude + ',' + res.latitude, }); }, //定位失败回调 fail: function (e) { wx.showToast({ title: JSON.stringify(), icon: "none" }) }, }); } }); },
21、在html里面做判断
if(xx){} else if (xxx) {} else{}
<input disabled="{{true}}" value="{{item.xb==='1' ? '男' :item.xb==='2'?'女':'暂无选择性别'}}"></input>
