Wechat applet

 

1.var app = getApp(); Introduce the whole project app.js file , It is used to obtain information such as public variables in the period .

    If you want to use util.js A method in the tool library , stay util.js in module.exports export , Then in the required page require You can get

2. Want to get app.js Medium gloabData Medium doubanBase, stay index.js Use in app.gloabData.doubanBase You can get this value .

3. Next, in the whole page（{}） in , first data, It is the internal data built on this page , Will render to this page wxml In file , similar vue, adopt setData modify data data , Drive the rendering of the page

4. Life cycle function ：onload（） Monitor page loading ,onready（） Page first render ,onshow（） Page shows ,onhide（） Page hidden

5.wxml Use of templates ： Within the organization name Write the name of the component in the attribute , then import It is introduced through name Get it

6. frequently-used wxml label ：view（div）,text（span）,icon,swiper,block,scroll-view

Be careful ：

1. The color of the navigation bar at the top of each page ,title In the json Middle configuration , If not configured , Go to app.json Total configuration in , stay app.json

If this page is not registered in, an error will be reported

2.json Comments cannot be written in , Will report a mistake

3. Use wx.switchTab Jump tab Page , stay app.json In addition to registration pages page , Still need to be in tabBar Register in tab page , To take effect . Be careful ：tab most 5 individual , That is, the bottom is the most 5 Menu . Other pages can only be opened through other routing methods

4.wx.navigateTo Is to jump to a non tab page , stay app.json After registration in , Keep the current page , Jump to a page in the app , Use wx.navigateBack  You can go back to the original page

5.wx.reLaunch Jump , There is no return button in the upper corner of the new page , When switching cities .

6. Passing parameters between pages

The parameters are written in the jump url In , Then another page in onload The transfer of parameters in the method option Received . Pass and get as follows id

7.data- Use of custom attributes at the beginning

such as wxml How do we write  

Click on the event object can be taken as ,var postId = event.currentTarget.dataset.postid;

Be careful ： Uppercase will be converted to lowercase , belt _ The symbol will turn into a hump

8. Event object event,event.target and event.currentTarget The difference between ：

   target It refers to the currently clicked components and currentTarget Refers to the component of event capture

such as , Carousel components , Click events should be bound to swiper On , In this way, we can monitor whether any image is clicked ,

At this time target This means image（ Because what you click is an image ）, and currentTarget refer to swiper（ Because the binding click event is in swiper On ）

9.wxss There is a pit ： Unable to read local resource , For example, if the background picture is used locally, an error will be reported .

Several ways to turn local pictures into online pictures ： Upload to personal website ;QQ Space album and so on are also ok

10. Wechat applet jumps to another applet

wx.navigateToMiniProgram({
      appId: 'xxxxxxxxxxxxxxxxxx', //  To jump to the small program appid
      path: 'page/index/index', //  Jump to the target page 
      extarData: {
        open: 'auth'
      },
      success(res) {
        //  Open the success   
      }
}) 

11. hover-class Attribute to specify the click state effect of the element . But in use, we should pay attention to , Most components do not support this attribute .

       <view hover-class="bg_red"> This is a passage </view>

12. Be careful ： Line breaks and spaces must be set in text In the label ,\t Space   \xa0 Space   \n Line break

13. Set the background color in app.wxss

page{

background-color="#fff";

}

 14. There are two methods of drop-down loading

A. Global settings   Using this method , It is to add the pull-down loading function to all pages in the wechat applet

 open app.json, Add such a sentence 
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " Lao Jiao's family ",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": "true"  // Add this sentence 
  },

B. Single page setup   Using this method , Only add drop-down loading function to individual pages must end , Otherwise, it will be loaded all the time

 Find the one you need to add the pull-down loading function wxml page , Find the corresponding .json file 
{

  "enablePullDownRefresh": "true" // Add this sentence 
}

Post code directly ;（ load page（{}） Inside

onPullDownRefresh:function(){
    setTimeout(function(){
      wx.stopPullDownRefresh();
      console.log(1);
    },1000)
  },

15. In the use of swiper When , Need to use swiper-item wrap up , Otherwise, the picture will not be displayed , But there is no error report

  First use swiper You may encounter the automatic rotation of the current picture until the end , The effect of jumping to the first page is not connected , You need to add circular=“true” Seamless connection

16. Wechat applet adds or modifies styles

Applet does not support in js Modify the style freely in , did not document object , That is, it cannot pass document.getElementById To get dom Elements

I realize the function of similar tabs in the following ways ;

index.wxml

 <view class='navs'>
    <view class='{
   {flag?"navsSon1 navsSon":"navsSon"}}' bindtap='meau' id="meau" data-text="text"> Order </view>
    <view class='{
   {flag1?"navsSon1 navsSon":"navsSon"}}' bindtap='talk'> evaluation </view>
    <view class='{
   {flag2?"navsSon1 navsSon":"navsSon"}}' bindtap='shop'> merchants </view>
  </view>

zaiindex.wxss Two styles are defined in

.navsSon{
  width: 20%;
  height: 100%;
  line-height: 90rpx;
  text-align: center;
}
.navsSon1{
  border-bottom: 5rpx solid yellowgreen;
}

stay index.js The operation is as follows

pages({
  data{
    flag:false,
    flag1: false,
    flag2: false,
  },
   meau(){
    var that=this;
    that.setData({
      flag: true,
      flag1: false,
      flag2: false,
    })
  },
  talk(){
    this.setData({
      flag: false,
      flag1: true,
      flag2: false,
    })
  },
  shop(){
    this.setData({
      flag: false,
      flag1: false,
      flag2: true,
    })
})

17. Wechat applet analysis html Rich text plug-ins wxparse Use

    First step ： Download the wxparse Put the file in the root directory

    The second step ： introduce <import src="../../wxParse/wxParse.wxml"/>  stay xx.wxml page

    The third step ： introduce @import "../../wxParse/wxParse.wxss"; stay xx.wxss page

    Step four ： introduce var WxParse = require('../../wxParse/wxParse.js'); stay xx.js page

    Step five ：

onLoad() Method

article_content:WxParse.wxParse('article_content', 'html', res.data.article_content, that, 5)

A single data
/** 
* WxParse.wxParse(bindName , type, data, target,imagePadding) 
* 1.bindName The data name of the binding ( Required ) 
* 2.type It can be for html perhaps md( Required ) 
* 3.data For incoming specific data ( Required ) 
* 4.target by Page object , It's usually this( Required ) 
* 5.imagePadding For when image adaptation is left and right single padding( The default is 0, Optional ) 
*/  

Templates use ：

Multiple array loops

/**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName:  Array name when calling for you 
* 3.bindNameReg For a circular community   If the binding is reply1,reply2... be bindNameReg = 'reply'
* 3.total by reply The number of 
*/
var that = this;
WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)

  Templates use ：

 

18. Wechat applets use filters

    stay pages Under the new .wxs file

var loaclData = function（value）{
  var date = getDate(value * 1000);
    var Month = date.getMonth() + 1;
    var Day = date.getDate();
    var hours = date.getHours(); // Calculate the remaining hours 
    var minutes = date.getMinutes(); // Calculate the remaining minutes 
    var Y = date.getFullYear() + '-';
    var M = Month < 10 ? '0' + Month + '-' : Month + '-';
    var D = Day + 1 < 10 ? '0' + Day + '' : Day + '';
    var H = hours < 10 ? '0' + hours + ':' : hours + ':'
    var m = minutes < 10 ? '0' + minutes : minutes;
    return Y+M + D + "   " + H + m;
}
module.exports = {
    localData: localData
}
 stay wxml Reference in file wxs file 
<wxs src="./filters.wxs" module="localData" />
<text class="scoreText">{
   {localData.filterScore(item.shop.score)}} branch </text>