Wechat applets

Writing in the front

It has been more than a year since the release of applets, and many people are already running on the path of applets. Recently I also began to learn small program, after learning for a period of time, want to see the learning effect of this period of time, so while learning began my first small program. I believe that a lot of people have used the little red book, but I was it amway a lot of good things, so I think I will write a little red book micro channel small program. Here I give you a few of my mistakes in writing. Because the time is not much, there are many functions are not perfect, the page is not very good-looking, please make do with it. ╮ (╯ del ╰) ╭

The preparatory work

  1. Development environment: WXML(HTML),WXSS(CSS),Javascript
  2. Development tools: VScode, wechat developer tools
  3. Auxiliary tools:
  • Markman: icon annotation tool, can be used for color, measurement.
  • Easy-mock: You can fake data and reference it in JS. Click here to view my project data.
  • Markdown: Online editor
  • GifCam: Gif recording tool
  • Wechat applets development document
  • Iconfont- Alibaba Vector icon library: There are all kinds of small ICONS you need

Several problems encountered

1. Slide the navigation bar left and right on the home page

Effect:

scroll-view 

<scroll-view class="navBar-box" scroll-x="true" style="white-space: nowrap; display:flex "> <view class="cate-list {{curIndex==index? 'on':''}}" wx:for="{{category}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory"> {{item.name}} </view> </scroll-view>Copy the code

Scroll-x =”true” to set it to slide horizontally, or if you want to slide vertically, use scroll-y=”true”. Note that for horizontal scrolling, you need a fixed width, and for vertical scrolling, you need a fixed height. The width of each item in the navigation list must be smaller than the width of the Scroll View; otherwise, items in the list will be arranged vertically. Because the navigation list has a large number of items, a Wx :for loop is used to loop out the list items. This reduces a lot of code, which is really a good thing φ(゜ – ゜▽゜*)

  • Do not use textarea, map, canvas, and video components in the Scroll view
  • The priority of scrollin-view is higher than that of scrolltop
  • Scrolling in the Scroll view will prevent the page from bouncing back, so scrolling in the Scroll view will not trigger onPullDownRefresh
  • To use a pull-down refresh, use a page scroll instead of a scroll-view so that you can also go back to the top of the page by clicking on the status bar at the top

2. The list of articles on the home page changes with the click on the navigation bar list

Effect:

swiper 

<swiper class="notes" current="{{toView}}"> <swiper-item class="category" wx:for="{{detail}}" wx:key="{{item.id}}"> < scroll - the view class = "cate - box" id = "{{item. Id}}" scroll - y > < - article list -- > < the view class = "note" wx: for = "{{item. Notes}}" wx:for-item="notes" wx:key="{{index}}"> <view class="note-info"> <navigator url=".. /index/note-info/note-info" > <view class="home-note-img"> <image src="{{notes.note_image}}"/> </view> <span>{{notes.title}}</span> </navigator> </view> <! <view class="note-handle"> <navigator class="writer" url="... /index/note-writer/note-writer"> <image class="photo-img" src="{{notes.writer_img}}"/> <span class="name">{{notes.writer}}</span> </navigator> <view class="like"> <image class="like-icon" src="/images/like.png"/> <span>{{notes.like}}</span> </view> </view> </view> </scroll-view> </swiper-item> </swiper>Copy the code

Use the Swiper component to wrap all article lists, with each Swiper-item representing a different list module. Before, different values were bound to each list item in the navigation bar. SwitchCategory event was triggered when the navigation was clicked. Swiper-item displays the corresponding item article list according to the different values of the navigation click. Here I used easy-mock to put the page’s data inside, and then used WX: Request to request the data.

// Request data
wx.request({
  url: 'https://www.easy-mock.com/mock/5b1e17a0d4a14a3247a6cd6b/'.success: (res) = > {
    this.setData({
      detail: res.data.data
    })
  }
})  
Copy the code

The contents of each article page are fetched through the WX :for loop. Use scrollview inside swiper-item to make the page scroll.

::-webkit-scrollbar{ height: 0; width: 0; color: transparent; } / / transparentCopy the code

  

3. Search page history

Wx: for 

<view class="search-history"> <text class="history-record"> </text> <view class="search-history-item" wx:for="{{historyRecord}}" wx:key="{{index}}"> <text>{{item.recordItem}}</text> </view> </view>Copy the code

NavigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo history

bindconfirm: function(e){      
  var recordItem = e.detail.value;
  this.saveHistory({
    id: 0,
    recordItem
  })
  wx.navigateTo({      // Jump to the search page
    url: '.. /searchbar/searchbar',})this.setData({
    searchContext:' '})},Copy the code

  

4. Add the receiving address

picker



picker
picker 

<! -- wxml --> <picker bindchange="bindaddressChange" value="{{addressValue}}" range="{{addressRange}}"> <view class="weui-select weui-select_in-select-after" name="adress">{{addressRange[addressValue]}}</view>Copy the code
Data: {addressValue: 0, // addressRange: [" Beijing ", "jiangxi province", "hunan province", "Shanghai", "hubei province", "zhejiang province", "fujian province", "chongqing"],}, < / picker >Copy the code

But this area, form validation and adding address information to the address list, gave me a headache for a while. The first is form validation, which is triggered when you submit the form. If nothing is entered or the input format is incorrect, use wx.showmodal () to prompt the user. The code is as follows:

formSubmit: function(e){
    var warn = "";
    var that = this;
    var flag = false;
    if(! e.detail.value.name){// Determine the input
      warn = "Please fill in the addressee!;
    } else if(! e.detail.value.tel){ warn ="Please fill in your cell phone number!";
    } else if(! (/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
      warn = "Mobile phone number format is not correct!";
    } else if(! e.detail.value.adress){ warn ="Please select a region!";
    } else if(! e.detail.value.doorAdress){ warn ="Please fill in the full address!";
    } else if(! e.detail.value.IDcard){ warn ="Please fill in your ID card number";
    } else if(! (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(e.detail.value.IDcard)){
      warn = "Incorrect format of ID card number"
    } else{
      flag=true;
        // Store to the global variable adressInfo
        app.globalData.adressInfo.push(e.detail.value);
        wx.navigateTo({
          url: '/pages/my/adress/adress'})}if(flag==false){     
        wx.showModal({
        title: 'tip'.content:warn
      })
    } 
  },
Copy the code

Add address information to the address list. My initial idea was to store the added address information locally and then retrieve the added address information from the address list. The wx.setStorage() and wx.getStorage() methods have to be mentioned.

Wx.setstorage () : Stores data in a key specified in the local cache, overwriting the original key. This is an asynchronous interface.

Wx.getstorage () : asynchronously retrieves the contents of the specified key from the local cache.

Wx :getStorage asynchronously retrieves the contents of the specified key from the local cache. Key is specified, so the added address overwrites the content of the original Key, so there is no effect of saving the address.

// Add address information to the local cache add-adress.js
submitdate: function (event) {
    var adressInfo = event.detail.value;
    wx.setStorage({
        key: 'adressInfo'.data: adressInfo,
        success: function (res){
          wx.navigateTo({
            url: '/pages/my/adress/adress'}}}})),// Get the address information adress.js cached locally in the address list
var that=this;     
wx.getStorage({
  key:'adressInfo'.success:function(res){
    console.log(res);
    var adressInfo=[];
    adressInfo.push(res.data);
    that.setData({
      adressInfo
    })
  }
})
Copy the code

So, went to consult a few big guy, see what method can solve this problem. After discussion, the solution was to push the added address information to the global and then fetch it from the global so that the previous data would not be overwritten. And by doing so, the amount of code is greatly reduced. The code is as follows:

// Define the global variable app.js corresponding to globalData
globalData: {
    userInfo: null.adressInfo:[]
}
// To submit the address information, call the defined variable add-adress.js
submitdate: function (event) {
    app.globalData.adressInfo.push(event.detail.value);
    wx.navigateTo({
        url: '/pages/my/adress/adress'
    })
    console.log(app.globalData.adressInfo);
},
// Get the address information and call the defined variable adress.js
var that=this;     
that.setData({
  adressInfo:app.globalData.adressInfo
})
Copy the code

Note: you need to initialize the app object at the beginning of the call to the global variable file

const app = getApp();
Copy the code

5. Introduction of the Easy-mock data interface

When using Easy mocks, it is important to write a specification. The “hole” here is: data attribute names cannot contain “-” (e.g. : note-image). While the data interface can be created, an error will be reported when the imported data is empty. Data attribute names can be “_” (for example, note_image).

conclusion

The above is the place where I think it is easier to fall and more difficult. There are still many unfinished functions, and I will improve them gradually in the future. For small program this aspect, is completely new, to a novice like me a suggestion, in addition to look at the micro channel small program development documents, can also take a look at open source small program project source, encounter problems, you can see how others are solved. Communities are also great platforms to get problems out there and solve them together.

If there is a bad place in this article, or a better way, welcome the big guys to point out, study together. This article is personally original, if you want to know more about my project, you can view my project source code. Hope this article has been helpful to you