On October 16, 2021, I was working on a wechat applet recently. The knowledge points encountered in the project will be recorded here and will be continuously updated and supplemented in the near future!
1, Get picture width and height
Refer to the original text for the width and height of the picture
// wxml
<image src="{{imgSrc}}" bindload="imgLoadFunc" style="width:{{contentImgWidth}}rpx; height:{{contentImgHeight }}rpx;"></image>
// js
data:{
contentImgWidth: 0,
contentImgHeight: 0,
},
imgLoadFunc: function(e) {
var tempWidth = e.detail.width; // Get the actual width of the picture
var tempHeight = e.detail.height; // Get the actual height of the picture
this.setData({
contentImgWidth: tempWidth,
contentImgHeight: tempHeight
})
},
2, Click the picture to view it
Refer to the picture and zoom in to see the original text
Refer to the original text for calculating the aspect ratio of the picture
// wxml
<image src="{{imgList[0]}}" bindtap="preview" data-src="{{imgList[0]}}"></image>
<image src="{{imgList[1]}}" bindtap="preview" data-src="{{imgList[1]}}"></image>
<image src="{{imgList[2]}}" bindtap="preview" data-src="{{imgList[2]}}"></image>
// js
Page({
data: {
imgList: [
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg",
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg",
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"
]
},
//Preview picture, enlarge Preview
preview(event) {
console.log(event.currentTarget.dataset.src)
let currentUrl = event.currentTarget.dataset.src
wx.previewImage({
current: currentUrl, // http link to the currently displayed picture
urls: this.data.imgList // http link list of pictures to preview
})
}
})
3, Get screen width and height
onLoad: function () {
this.setData({
height: wx.getSystemInfoSync().windowHeight,
width: wx.getSystemInfoSync().windowWidth
})
}
4, Open APP end
Note that when the applet is opened from the scene opened by the APP (scene value 1069), the applet will obtain the ability to return to the APP. At this time, the user can click the button to open and pull up the APP of the applet. That is, the applet cannot open any APP, but can only jump back to APP.
5, Remove the return key in the upper right corner
//home.wxml
<view bindtap="gotopost">Another jump mode</view>
//home.js
gotopost(){
wx.reLaunch({url: "/pages/post/index?id=62"});
}
//post.js
onShow(){
wx.hideHomeButton();
},
6, Subcomponents use global styles
Without this sentence, the style in the applet will be preceded by index –
Component({
options: {
addGlobalClass: true
}
})
7, After iconfont is introduced, the real machine debugging is not displayed
Solution: convert woff, and woff2 files to base64 and use them
Convert web address: https://transfonter.org/
8, Applet UI framework Introduction (vant)
An article in Jianshu: https://www.jianshu.com/p/54ed83b6c81a
Installation tutorial on vant official website: https://youzan.github.io/vant-weapp/#/quickstart
- Open the terminal in wechat developer tool, enter npm init, and go all the way ok to generate a new package.json
- Refer to the vant official website, NPM I @ vant / Web - s -- production to install the latest version. For the remaining steps, refer to the installation tutorial on the vant official website
/(ćoć)/~~
Yitong has been configured according to the official website. You can see the development preview and real machine test. When the uploaded code is released into the experience version, there is a blank. What? After searching on the Internet, delete the npm package and reinstall it. Do it again. Build the npm from time to time and solve it after a meal of operation
9, Encapsulation of applet network request method
Applet network request encapsulation: https://www.cnblogs.com/-pdd/p/14292614.html
10, The text box filters letters, leaving only numbers
//In the input box, enter the triggered function
handleTel(e){
console.log(e.detail);
var mobile = "queryform.mobile";
var tel = e.detail.value;
var reg = /[a-zA-Z]+/;
var result;
while(result = tel.match(reg)){
tel = tel.replace(result[0],'');
}
this.setData({
[mobile]:tel
})
}
//This method is the most convenient. It can filter not only letters, but also other special symbols
var s ="Price 4500 yuan";
var num= s.replace(/[^0-9]/ig,"");
alert(num);//4500
11, Applet nested loop
Use Wx: for item = "newitem" to reassign the item name
<van-index-bar index-list="{{ indexList }}" highlight-color="#f00">
<view wx:for="{{ zoneList }}" wx:key="index">
<van-index-anchor index="{{item.key}}" />
<van-cell
wx:for="{{ item.list }}"
wx:key="index"
wx:for-item="newitem"
title="{{newitem.name}}"
value="{{'+' + newitem.tel}}"
></van-cell>
</view>
</van-index-bar>
12, Upload Avatar
Reference article: https://www.yisu.com/zixun/184804.html
<!-- head portrait -->
<view class="avatar-wrap" bindtap="changeAvatar">
<image class="avatar" mode="aspectFill" src="{{registerform.avatar}}" ></image>
</view>
// js method
changeAvatar(){
var that = this;
var avatarimg = "registerform.avatar"
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: BASEURL + '/api/common/upload',
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success (res){
console.log(JSON.parse(res.data));
const result = JSON.parse(res.data);
if(result.code==0){
that.setData({
[avatarimg]:result.data.url
})
}else{
wx.showToast({
title: 'Upload failed',
icon:'none'
})
}
}
})
},
fail: function () {// fail
},
complete: function () {// complete
}
});
13, Functions used in WXML
<view>{{ formate(time) }}</view>
Precautions for use: https://blog.csdn.net/weixin_39725702/article/details/93710992
Reference article: https://blog.csdn.net/Umbrella_Um/article/details/107253834
// In the wxml page, first import the wxs file and then use it
<wxs module="filter" src="../../utils/wxs/common.wxs"></wxs>
<text class="font26">{{ filter.calc(postObj.browse_num) }}browse</text>
//In wxs file
var filter = {
calc:function(num){
var total = null;
if(num > 10000){
total = (num/10000).toFixed(1) + 'w';
}else{
total = num;
}
return total
}
}
module.exports = {
calc:filter.calc
};
14, Regular matching in wxs
Reference article: https://blog.csdn.net/yilingsj/article/details/106873785
Regular method reference: https://www.php.cn/wenda/55033.html
The regular matching method in js is not supported in wxs. The getRegExp function of wechat should be used.
// wxs file
replaceStr:function(str){
var strnew = str + ' ';
var reg = getRegExp('@([^@\s]*)\s', 'g');
if(strnew.match('@')){
strnew = strnew.replace(reg,function (match,param,offset,string) {
var html = "<span style='color:#41AEF5'>" + match +"</span>";
return html;
})
return strnew;
}else{
return str;
}
}
// wxml file
<wxs module="filter" src="../../utils/wxs/common.wxs"></wxs>
<view class="mt30 font30">
<rich-text nodes="{{ filter.replaceStr(item.content) }}"></rich-text>
</view>
15, Dynamic setting applet navigationBarTitleText
wx.setNavigationBarTitle({
title: 'Dynamic title'
})
16, The navigation bar background color changes as the scroll bar scrolls
Reference article: https://blog.csdn.net/u013633921/article/details/114014500
<!-- wxml -->
<scroll-view scroll-y="true" style="height: 100%;" bindscroll="scroll">
<!-- Customize navigation bar -->
<view class="nav-top" style="padding-top: {{ statusBarHeight }}px; background: {{ navTopBgcolor }}; color:{{navColor}}">
<view class="nav-top-img-view" bindtap="onBack">
<!-- <van-icon name="arrow-left" /> -->
</view>
<view class="nav-top-title">Personal home page</view>
<view class="nav-top-img-view"></view>
</view>
</scroll-view>
// js
data: {
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
navTopBgcolor:'transparent',
navColor:'#fff',
}
// The scroll bar scrolls and the title bar changes color
scroll(e) {
if (e.detail.scrollTop < 100) {
this.setData({
navTopBgcolor: 'transparent',
navColor:'#fff'
})
} else {
this.setData({
navTopBgcolor: '#fff',
navColor:'#333'
})
}
},
// wxss
/*Top navigation bar*/
.nav-top{
position: fixed;
top: 0;
left: 0;
height: 45px;
width: 100%;
/* opacity: .5; */
display: flex;
flex-direction: row;
z-index:1000;
transition: 0.3s all linear;
}
.nav-top-img-view {
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
}
.nav-top image {
height: 20px;
width: 20px;
margin: 12.5px;
}
.nav-top-title {
font-size:30rpx;
transition: 0.3s all linear;
text-align: center;
line-height: 45px;
flex: 1;
}