In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly introduces "WeChat Mini Programs Development case Analysis". In daily operation, I believe many people have doubts about WeChat Mini Programs development case analysis. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "WeChat Mini Programs Development case Analysis"! Next, please follow the editor to study!
New Mini Program project
First, select the Mini Program project for the new project, select the hard disk path where the code is stored, enter your Mini Program AppID, and give your project a nice name. Finally, click OK, and you will get your Mini Program developer tools portal.
Directory structure
Page
Index
Index.js
Index.wxml
Index.wxss
Logs
Logs.js
Logs.json
Logs.wxml
Logs.wxss
Utils
Util.js
App.js
App.json
App.wxss
Project.config.json
Download and install BmobSDK
First, put bmob-min.js and underscore.js in the corresponding files, for example, in utils
Second, add the following two lines of code to app.js for global initialization
Const Bmob = require (\ 'utils/bmob.js\')
Bmob.initialize (your Application ID, your REST API Key)
Create a table named detail, and then click the add column to create 3 fields, one by one
Title field, String type, used to store the title of the article image field, String type, used to store the article picture detail field String type, used to store the body of the article and then add some data for testing
List page implementation
First, go to Ctrl + An in index.js and press Delete to clear the page, and then write the logic yourself. First, we need to introduce bmob.js and then request the data in the detail table in the life cycle of onLoad Mini Program, so that bmob and Mini Program can complete the first interaction.
/ / index.js
/ / obtain an application instance
Const Bmob = require (\'.. /.. / utils/bmob.js\'); / / every page that needs to use bmob needs to introduce this js
Page ({
OnLoad () {
Let Diary = Bmob.Object.extend (detail); / / introduce the table detail
Let query = new Bmob.Query (Diary)
Query.find ({
Success: (results) = > {
Console.log (results) / / print data
}
Error (error) {
Console.log (`query failed: ${error.code} ${error.message} `)
}
});
}
})
Here has completed a data query to bmob, bmob document transfer gate, this query returns 10 records by default. When there is too much data, it is unfriendly to query a lot of data at one time, not that bmob is slow to query data, but that if in the future your users use your Mini Program when the network speed is slow, and the waiting time for requesting data is too long, this waiting process may cause users to stop using your Mini Program. So we need to optimize the user experience. Then transform the code into one pull-up load more.
/ / index.js
/ / obtain an application instance
Const app = getApp ()
Const Bmob = require (\'.. /.. / utils/bmob.js\'); / / every page that needs to use bmob needs to introduce this js
Page ({
Data: {
Detail: [], / / Page data
Pagination:0, / / Page number
PageSize: 4, / / data per page
Nodata:true / / No data
}
OnLoad () {
/ / the initial page gets the page data for the first time
This.getData ()
}
GetData () {
Let Diary = Bmob.Object.extend (detail); / / introduce the table detail
Let query = new Bmob.Query (Diary)
Query.limit (this.data.pageSize); / / returns n pieces of data
Query.skip (this.data.pageSize * this.data.pagination); / / paging query
Query.descending (\ 'createdAt\'); / / created columns in reverse order
Query.find ({
Success: (results) = > {
Let data = []
/ / store the resulting data in the array
For (let object of results) {
Data.push ({
Id: object.id
Title: object.get (\ 'title\')
Image: object.get (\ 'image\')
Detail: object.get (\ 'detail\')
CreatedAt: app.timeago (object.createdAt) / / call timeagoJs to convert the date to N-day format
})
}
/ / determine whether any data is returned
If (data.length) {
Let detail = this.data.detail; / / get the data that already exists on the page (array)
Let pagination = this.data.pagination; / / get the current page (page number)
Detail.push.apply (detail, data); / / merge the array on the page with the newly acquired array
Pagination = pagination? Pagination+1: 1; / / this is used to determine whether to render data for the first time or to drop down and load render data.
/ / Update data
This.setData ({
Detail: detail
Pagination: pagination
})
} else {
/ / No data is returned and the page no longer loads data
This.setData ({
Nodata: false
})
}
}
Error (error) {
Console.log (`query failed: ${error.code} ${error.message} `)
}
});
}
Router (e) {
/ / Jump to the article details page
Const id = e.currentTarget.dataset.id
Wx.navigateTo ({
Url: `.. / detail/detail?id=$ {id}`
})
}
OnReachBottom () {
/ / pull down and touch the bottom to load more data
This.getData ()
}
})
In the above code, the timeagoJs download address is used at the date, the download timeagoJs is placed in the util folder, and then introduced in app.js.
/ / app.js
Const Bmob = require (\'. / utils/bmob.js\')
Const timeago = require (. / utils/timeago.min.js)
Bmob.initialize (your Application ID, your REST API Key)
App ({
Timeago (date) {
Return new timeago () .format (date,\ 'zh_CN\')
}
})
2. After completing the logic layer of the list page, go to index.wxml to write the view layer, and the view layer is much simpler. The data you get is an array, and there is a json in the array. Just render it with the wx:for method.
Third, to beautify the page and write the same style. After all, this is a face-looking society.
/ * * index.wxss**/
.container {padding: 30rpx;}
Width: 100%; margin-bottom:30rpx; border-radius: 5rpx; overflow: hidden; box-shadow: 00 10rpx rgba (0,0,0,.1)}
Image {width: 100%; height: 240rpx; display: block;}
.room.content {background-color: # FFF; padding: 20rpx;}
.title {display: block; font-size: 30rpx; font-weight: bold; margin-bottom: 20rpx;}
.date.date {display: block; font-size: 24rpx; color: # 999}
.nodata {text-align: center; font-size: 24rpx; color: # 999}
The above list page is complete. When you click on the page at this time, an error should be reported, indicating that the detail page is not configured, so go to app.json to configure the detail page.
At this point, the study of "WeChat Mini Programs Development case Analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.