This section mainly records the various problems encountered when developing small programs
Navigateto jump stack overflow
NavigateTo has a stack overflow problem, so you need to make a decision that the maximum stack memory is 10 layers
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
// console.log(url)
// // Changing the routing address when switching TAB
if (getCurrentPages().length <= 0) {
wx.navigateTo({
url
})
} else {
wx.reLaunch({
url
})
}
// We can get the number of stacks
console.log('the stack', getCurrentPages().length)
this.setData({
// When switching TAB, change the current active serial number, change the TAB color icon and other styles
selected: data.index
})
}
Copy the code2. The database cannot accept emoticons
When we submit emoticons in the form of the applet, it is not acceptable to the database if it is not processed, so we need string transcoding
2.1 Form Submission
Submit the form transcoding and accept the data back in
throughencodeURIDecoding waylet regex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|# ]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig
// Use regular substitution
let nickWords = this.data.words.replace(regex, function (res) {
return encodeURIComponent(res)
})
let nickTitle = this.data.title.replace(regex, function (res) {
return encodeURIComponent(res)
})
let nickTopic = this.data.topic.replace(regex, function (res) {
return encodeURIComponent(res)
})
let params = {
contract_id: parseInt(this.data.initList.contract_id),
works: nickWords,
title: nickTitle,
topic: nickTopic,
picture_urls: this.data.picArr,
video_urls: this.data.vedioArr
}
Copy the code2.2 Data Acceptance
topic: decodeURIComponent(res.result.topic),
/ / title
title: decodeURIComponent(res.result.title),
// Content text
words: decodeURIComponent(res.result.works)
Copy the codeThere is a problem the udcode encoding, % problems, so need to escape the % when submitted, and there will be a problem in user input expressions add % one thousand, if already exist in the text input %, % when they transcoding transcoding, so need to use regular change will % % 25, will automatically convert to % % 25 after decoding.
analysisEmoji(str) {
// Convert % to %25
let keyStr = str.replace(/%/g."% 25")
let regex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|# ]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig
let nickWords = keyStr.replace(regex, function (res) {
return encodeURIComponent(res)
})
return nickWords
},
Copy the code3. The real machine MiniProgramError error
(in promise) MiniProgramError {” errMsg “:” hideLoading:fail:toast can’t be found “} Object
Wx. showLoading and wx.showToast can display only one at a time
Wx.showloading should be paired with wx.hideloading
The solution
Define a variable isShowLoading=false;
When wx.showLoading is called, isShowLoading is set to true and showLoading is called
if(! isShowLoading){ wx.showLoading({title: 'Loading'.icon: 'loading',
})
isShowLoading =true;
}
// Check whether isShowloading is true before invoking wx.hideLoading. Otherwise, the command is not executed.
if(isShowLoading){
wx.hideLoading()
isShowLoading =false;
}
Wx.hideloading: wx.hideloading: wx.hideloading: wx.hideloading: wx.hideloading
// Otherwise, it will not be executed. The showToast function is then executed.
if(this.data.isShowLoading){
wx.hideLoading()
}
wx.showToast({
title: 'No more data.'.icon: 'none'});Copy the code4. Swiper set fillet when instant right Angle problem
When swiper is rounded, a right Angle is first rounded and then rounded
Solution:1.Need to set overflow: Hidden in the box outside swiper;2.Set it on swiperovewflow:hidden;
border-radius:10rpx;
transform: translateY(0);
3.Round the image border-radius:10rpx;Copy the code <view class="swiper_content">
<swiper autoplay interval="2000" circular indicator-dots indicator-color="Rgba (44,44,44,. 3)" indicator-active-color="Rgba (255128, (9)" style='ovewflow:hidden; border-radius:10rpx; transform: translateY(0); '>
<swiper-item class="" item-id="">
<image class="" src=".. /.. /images/swiper/01.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src=".. /.. /images/swiper/02.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src=".. /.. /images/swiper/03.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src=".. /.. /images/swiper/04.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src=".. /.. /images/swiper/05.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src=".. /.. /images/swiper/06.png"></image>
</swiper-item>
</swiper>
</view>
Copy the code .swiper_content {
width: 710rpx;
height: 250rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 20rpx;
border-radius: 10rpx ! important;
border-radius: 30rpx;
overflow: hidden;
swiper {
width: 100% ! important;
height: 250rpx ! important;
border-radius: 10rpx ! important;
}
swiper-item {
width: 100%;
border-radius: 10rpx ! important;
position: relative;
}
image {
width: 100%;
height: 250rpx;
border-radius: 10rpx; }}Copy the code5. There is a pull bar problem in scroll view horizontal sliding
To use scrollview, you need to hide the scroll bar. By default, the scroll bar exists
// Add to the parent box
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
Copy the code6. Customize the navigation bar
In practice, the default navigation bar of the applet needs to be changed into the mode we want, for example, search, slide, etc. In fact, the default navigation bar should be removed first, and the height of the navigation bar at the top should be calculated according to the interface provided by the applet.
The navigation bar consists of three parts: capsule, top navigation bar and main navigation bar
6.1 Configuring Index. json To hide the original navigation Bar
"navigationStyle":"custom"
Copy the code6.2 Calculate the height of the top navigation bar
//index.js
wx.getSystemInfo({
success: (res) = > {
this.setData({
statusBarHeight: res.statusBarHeight, }); }});Copy the code//index.wxml
<view style="width:100%; height:{{statusBarHeight}}px; background-color:#88D0FF">
</view>
Copy the code6.3 Calculate the height of the main navigation bar according to the navigation bar and the capsule
//index.js
let systemInfo = wx.getSystemInfoSync();
let rect = wx.getMenuButtonBoundingClientRect
? wx.getMenuButtonBoundingClientRect()
: null; // Capsule button position information
wx.getMenuButtonBoundingClientRect();
let navBarHeight = (function () {
// Height of navigation bar
let gap = rect.top - systemInfo.statusBarHeight; // Dynamically calculate the distance between status bar and capsule button of each mobile phone
return 2* gap + rect.height; }) ();this.setData({
navBarHeight
});
Copy the code//index.less
.nav_title_area{
position: relative;
color: #fff;
.select_option{
display: flex;
align-items: center;
height: 100%;
vertical-align:middle;
text{
padding-left: 20rpx;
padding-right: 5rpx;
padding-bottom: 5rpx;
}
}
.nav_title{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%); color: #fff; }}Copy the code6.4 The navigation Bar needs to be fixed
//index.wxml
<view style=' position: fixed; top: 0px; left:0px; width:100%; height:{{statusBarHeight+navBarHeight}}px; z-index:999'>
<view style="width:100%; height:{{statusBarHeight}}px; background-color:#88D0FF" class='statusBarHeight'></view>
<view class="nav_title_area" style="width:100%; height:{{navBarHeight}}px; background-color:#88D0FF">
<view class="select_option">
<picker range="{{citySelect}}" value="{{citySelectIndex}}" bindchange="bindcityPickerChange" class="pickCity">
<text>{{citySelect[citySelectIndex]}}</text>
<van-icon name="arrow-down" size="14px" />
</picker>
</view>
<view class="nav_title">Invoice square</view>
</view>
</view>
Copy the code6.5 A view needs to be added to fill the blank left by the fixed positioning of the navigation bar
<view style="width:100%; height:{{statusBarHeight+navBarHeight}}px"></view>
Copy the code7. Scan the small program code to enter the details page. Parameters cannot be obtained
Sweep the small program code into a fixed page, this is very simple, in the developer directly generated background can, but if you need to dynamically generated, according to the different details page id to generate different small program code, this time because it is directly into the page, without going through the home page, so the options in the onLoad is can’t get this id, This is going to take another parameter scene
onLoad: function (options) {
if (options.aId) {
this.setData({
aId: options.aId,
});
} else if (options.scene) {
// It needs to be decoded
let scene = decodeURIComponent(options.scene);
let aId = parseInt(scene.split("=") [1]);
this.setData({
aId: aId,
});
} else {
this.setData({
aId: this.data.aId, }); }}Copy the code/pages/details/index? aId=2196The scene to get? The next part of the solution is to get this parameter in the scene, yes? In the next section, the parameter to get is aId%3D2196, which needs to be passeddecodeURIComponentDecoding aId =2196
let scene = decodeURIComponent(options.scene); AId is obtained using a regular or string slicing methodCopy the codeIt is difficult to debug here, so we need to debug according to wechat developer tools and change the compilation mode
You can choose compilation mode when debugging1047Far from itlet a='aid=1234'
var uri_encode=encodeURIComponent(a);
console.log(uri_encode); Inverse codingCopy the code8. Get the corresponding location according to the longitude and latitude
Here combined with Tencent map for operation, through the latitude and longitude of the small program combined with Tencent map API, to achieve the current city location
8.1 Configure Tencent Map plug-in in the background management system
Settings => Third-party Settings => Add plug-ins
8.2. Apply for Tencent map account and generate key
WebServiceAPI needs to be configured, the domain name whitelist, fill servicewechat.com, this must be written, and fill wechat small program appID
8.3. Configure in app.json
The purpose is to call the API of the applet to get the latitude and longitude of the current location
"permission": {
"scope.userLocation": {
"desc": "Your location information will be used for small program location."}},Copy the code8.4. Use qqmap – wx – JSSDK
Introducing qqmap – wx – JSSDK
import qqmapwx from ".. /.. /utils/qqmap-wx-jssdk.min.js";
Page({
/** * initial data for the page */
data: {},
/** * lifecycle function -- listens for page loading */
onLoad: function (options) {
const qqmapsdk = new qqmapwx({
// Use the key generated by your Tencent map application
key: "LM5BZ-F55W3-X3J3R-YXUVL-LCF7V-DZBBW"});// The applet will pop up to prompt authorization before execution
wx.getLocation({
type: "wgs84".success(res) {
// Get latitude and longitude
console.log(res);
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude,
},
// Successful callback
success: (r) = > {
console.log("Address information", r.result.address_component);
},
fail: function (res) {
console.log(res); }}); }}); }});Copy the code