In fact, BEFORE a little look at the small program project, but when self-learning, always feel that this can also be, that can also be, when the formal development of the found that there seems to be a pit. The pit inside said, some are caused by unfamiliar documents, some are indeed small procedures with their own pit or development encountered problems

1. Obtain the mobile phone number

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> //mpvue (depending on the binding event) <button class="phone-btn" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber"  hover-class="other-button-hover"</button>Copy the code

GetPhoneNumber (e) {console.log(e)}Copy the code

Note that if the wx.login login is invoked in a callback, the login state may be refreshed. In this case, the sessionKey exchanged by code is not the sessionKey used for encryption, causing decryption failure. Sometimes successful, sometimes failed to obtain the mobile phone number, the developer is advised to login in advance; Alternatively, use checkSession first in the callback to check the login state and avoid login refreshing the login state.

2. Units used in mpVue development

1, mpvue template project comes with the px2rpx-loader compiler, px2rpX-Loader will automatically get CSS PX values into RPX array (px=2rpx), so in order to unified specification, in the SCSS file and in the Vue style node, Use px as the unit for the design. Note that 750rpx is the width of the screen, so 375px is the width of the screen (if the design is 750 pixels, you can modify the configuration file and directly change it to 1:1, so that the number of pixels is more comfortable).

Use the styles function that automatically converts px to RPX (px=2rpx) if width and height are computed.

<div :style="computedStyles"></div>

  computedStyles() {return styles({
        width:'100px'}})},Copy the code

4, there is also a case, if the node style is used, it is best to use RPX units, otherwise, if you use PX units, this case does not do any processing on different resolutions of the device display effect is different

3. Radio color change (the default color is Wechat forgiveness green)

Plan 1 :(most of baidu’s results are this, but it doesn’t take effect, oh, human nature is sticky monster)

Wx-radio-input. wx-radio-input. wx-radio-input. checked{border: none; background: red; }Copy the code

Option 2: Color property on the document

// Just add color <radio-group class="radio-group" @change="radioChange($event, index,item.question_id,item.question_type)">
  <label class="radio" v-for="(item2,index2) in item.option" :key="index2">
    <radio :value="item2.option_id"  color="#FF743D"/>

Copy the code

4. Scroll to the specified position

Due to the requirements of the small program, there is a page for the questionnaire, when you fill in a question, the page will scroll to the next question

Solution a: One is scropTo, and the other is scroll view. Let’s start with wx.pageScrollTo. There are two problems with this property. This element will disappear first and then appear again, causing the screen to flicker and shake (this is a bug of the small program, which has not been solved by the official), and then the front end calculates the dom height and dynamically adjusts the scrollTop value in pageScrollTo to find that the jump position is not accurate

Scheme 2: Use the scroll-view to jump to the specified position through the value of the scroll-into-view

<scroll view scroll-y style="height: calc(100% - 50rpx); width:96%; margin-top:60rpx; padding-bottom:120rpx; position:fixed; left:30rpx;" scroll-top="0" :scroll-into-view=currView>
  <radio-group class="radio-group" @change="radioChange($event, index,item.question_id,item.question_type)">
    <label class="radio" v-for="(item2,index2) in item.option" :key="index2">
      <radio :value="item2.option_id"  color="#FF743D"/> {{item2.option_name}} </label> </radio-group> </scroll-viewdata() {
return {
  currView: ' '}; }, // here are methods methods:{radioChange:function({mp}, index,question_id,question_type) {
      let_this = this; . // If not the last question, trigger the logic to jump to the next questionif(index<(_this.questionData.question.length-1)){ _this.tap(index+1); }}, tap(val) {this.currview = this.currView = this.currView ='kindItem'+val
Copy the code

5. The data in the mini program will not be destroyed when the page jumps through navigateTo, resulting in abnormal information display

RedirectTo is used instead of navigateTo. This function destroys the original page when redirecting to the page, thus realizing the function similar to.empty() in jquery, clearing the data in the page element, but the page cannot be retraced

url: ' '
Copy the code

Solution 2: Empty data in the onUnload and onLoad hook functions

6. Newline render

<p class='index-remind'>{{remind}}</p>

var remind = 'hello\n' + + '\nWorld'

.index-remind {
  width: 550rpx;
  height: 30rpx;
  color: # 222222;
  font-size: 30rpx;
  white-space: pre-wrap;
Copy the code