The last article introduced the small program network communication and data parsing; This article then detailed content to continue to introduce the other properties of small program to use (some is not necessarily very complicated function, but is the use of basic operation of the project development, this paper will introduce), based on the function point do special instance, particularly detailed overall use we will be explained in other articles to unfold.

Focus on Spring Boot+ micro services, mini programs, Flutter, Android, regularly share articles and video tutorials, reply to Java materials after attention, receive the learning dry goods carefully prepared for you!

​

This is the eighth article in the applets series, and knowing the previous articles will help you understand it better:

1. Applets (I) Understand applets 2. Applets (II) APPID fetching and project directory structure 3. Small program (3) life cycle 4. Small program (4) development and debugging methods and real machine debugging 5. Applets (5) Applets create project parsing 6. Applets (6) TAB switching and data binding, data storage 7. Small program (seven) network communication and data analysis

preface

One, data display two, data transfer three, page jump


1. Data list display

  • message.wxml


Set the display of the interface with message. WXML

<view class="container">    <block wx:for="{{list}}" wx:key="key">        <view class="brand_item" data-id='{{index}}' catchtap='onlineClick'>            <icon class="pic" style="visibility:{{item.isRead == 1 ? 'hidden' : 'visible'}}"></icon>            <view class="right_cont">                <text class="name">{{item.name}}</text>                <text class="time">{{item.cate_sname}}</text> </view> </view> <! -- </navigator> --> </block></view>Copy the code

  • essage.wxss


Set the layout of the interface through messageWxSS file

page{    background: #fff; font-size: 14px; }.container .brand_item{ display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e4e4e4; padding-top: 10px; padding-bottom: 10px; width: 100%; }.container .brand_item .pic{ display: block; width: 10px; height: 10px; margin: 10px; border-radius: 100%; background-color: #f7bc92; }.right_cont{ display: flex; flex-direction: column; padding-right: 10px; width: 90%; }.right_cont .name{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; color: #353f41; font-size: 32rpx; width: 100%; float: left; } .weui-loadmore { width: 65%; Margin: 1.5 em auto; The line - height: 1.6 em. font-size: 14px; text-align: center; } .weui-loadmore__tips { display: inline-block; vertical-align: middle; } .right_receive{ display: flex; flex-direction: row; } .right_receive .time{ position: relative; color: #778ea6; width: 70%; float: left; margin-top: 10rpx; font-size: 24rpx; }Copy the code

message.json

{  "navigationBarTitleText": "News"."enablePullDownRefresh": true."backgroundColor": "#f8f8f8"}Copy the code



message.js

Get the list data through the access interface in message.js (refer to the previous chapter on network Communication for the interface called)



/** * requestData:function () {    let that = this    let param = {      "size": 10,"page":1    }    util.getReq('https://api.apiopen.top/musicBroadcasting', param, function (res) {      console.debug(res);      wx.hideLoading()      if (res.code == 200) {        if(null ! = res.result[0].channellist && res.result[0].channellist ! ="") {            that.setData({              list: res.result[0].channellist,              totalPage: 1,            })          } else {            that.setData({              isHideNoMore: false}}})else{}})},Copy the code



2. Data transfer

Get the data and pass the data Settings

// Click on each line to enter the details, enter the data name onlineClick:function(e) { var that = this; / / get the subscript var index = e.c. with our fabrication: urrentTarget. Dataset. Id; Console. log(index) var name = this.data.list[index].name; NavigateTo ({url:'detail/msgadetail? con='+ name // Set jump interface absolute path and parameter splicing})},Copy the code

Get passed data


The received data needs to be retrieved in the MSgdetail file in the detail directory

/** * life cycle function -- listen for page load */ onLoad:function(options) {var that = this; Wx. SetNavigationBarTitle ({/ / transfer data set as the title shows the title: the options. The con, / / options. Con for the transfer of data})},Copy the code


3. The page is displayed

NavigateTo ({}) : navigateBack to wx.navigateBack ({}) : navigateBack to wx.navigateBack ({}) : navigateBack to wx.navigateBack

wx.navigateTo({      url:'.. /test/test? id=1&page=4', // The path to the page with parameters? Separate, different parameters are separated by &; Relative path, not required. WXML suffix SUCCESS:function(){} // Callback after success; Fail:function(){} // callback after failure; Complete:functionOnLoad (){} // return the value of the option.id to the onLoad() function.functionThis.setdata ({id:option.id,}); (option) {console.log(option);Copy the code

2. Wx.redirectto () : closes the current page and switches to a non-tabbar page

3. Use the component <navigator>

<navigator url='.. /test/test'</navigator>Copy the code

4. Wx. switchTab: Switches to a tabBar page

wx.switchTab({      url: '.. /taste/index'// Note that switchTab can only jump to a TAB page, can not jump to a TAB page})Copy the code

4. Return to the previous page of data parameter transfer

goback: function () {     let city = 'hello';    let id = 1;    let pages = getCurrentPages()    letPrePage = pages[pages.length-2] // prePage. SetData ({addresCon: city, cityID: id}) wx.navigateBack({}); // return to previous page},Copy the code

5. Hide and show effects

<view class="container">    <block wx:for="{{list}}" wx:key="key">        <view class="brand_item" data-id='{{index}}' catchtap='onlineClick'>            <icon class="pic" style="visibility:{{item.isRead == 1 ? 'hidden' : 'visible'}}"></icon> // Check whether isRead hides <view class="right_cont">                <text class="name">{{item.name}}</text>                <text class="time">{{item.cate_sname}}</text> </view> </view> <! -- </navigator> --> </block></view>Copy the code

conclusion

Using applets makes it very easy and fast to develop applets, we don’t have to worry about the components in the API and so on, the versions that are applicable and so on, we can use anything we want, just add a configuration.

Demo address: github.com/chenjianpen…