当前位置：网站首页>Wechat applet learning record

Wechat applet learning record

2022-06-11 05:36:00 【Cockroach bully BBQ】

Originally js Follow h5 Can also understand the level of , Can't write , I thought small programs were very difficult , I've been in touch with , Record keeping .

The functions you do are as follows ：1, Login screen 2, Network request 3, The list shows 4,item Click on 5, Image loading 6, Drop down to refresh data 7, Pull up to load data 8, Verification code function 9, Bottom popup list item Click Select 10, Page Jump and value transfer

Look at the interface , It's ugly , Anyway, I don't have any design drawings , Just look at the function ……

1, Login screen Write your own style The layout has row and column Namely Android in LinnerLayout Horizontal and vertical

</view>

<text> password :</text>

</view>

Through this property bindinput Can be in js Get the input content in as follows

inputusername: function (e) {

// Assign the value of the entered user name to the global data Medium username And then click login Click the global button data Medium username The same goes for passwords

this.setData({

username: e.detail.value

})

2, Network request and value according to key （ Here's the request https://www.weather.com, You need to go to the development settings in the background -- Interface settings add , Jump to the applet's web-view Medium url You also need to add configurations ,tip: Jump web-view This url The configuration will fail occasionally ....）

var that = this;

wx.request({

url: 'https://www.weather.com.cn/data/sk/101010100.html',

data: {},

// method: "POST",

header: {

'content-type': 'json' // The default value is

// 'content-type':'application/x-www-form-urlencoded'

success: function (res) {

console.log(res.data.weatherinfo.sm) // Take that one . That'll do

}

})

3, The list shows

</view>

wx:for Is the key to rendering a list

4,item Click and transfer values Click events registered above bindtap="clickItem" Click to get index The key is data-bean="{ {index}}" , then

// Get the index

clickItem: function(e){

var that = this;

var index = e.currentTarget.dataset.bean;

// Put a parameter （ example url） Pass to next page

url: '../webview/webview?url='+that.data.listData[index].url,

5, Image loading What I'm talking about here is using local images

When you want to use this picture page Next newly build image Folder Put the picture in , And then in wxml It is OK to use it in

<view>

</view>

6, Drop down to refresh data

In the... To add a drop-down refresh page Of json Add... To the file "enablePullDownRefresh": true as follows

"usingComponents": {},

"enablePullDownRefresh": true

And then in

/**

* Page related event handler -- Monitor user pull-down action

onPullDownRefresh: function () {

wx.showNavigationBarLoading() // Show load... In the title bar

// simulation 3s Asynchronous operation of pull-down refresh Stop the pull-down refresh when finished

this.setData({

// Do not show the bottom add that is requesting data and has no more data

showloading:false,

showloaded:false,

})

this.jishiqi() // The countdown mimics the operation of the asynchronous request interface jishiqi This function needs to be written on top of this function

jishiqi : function (){

var that = this;

var num = 3;

// var datanews = [];

var addData = [{name:" I am me ",img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607331222108&di=2ce09338277db412ca8950ee82ed5ea9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F08%2F20181008185834_sgnqc.jpg",info:" Xiao Xin painting an elephant ",url:"https://lol.qq.com/guides/detail.shtml?ADTAG=cooperation.glzx.web&name=Annie&line=mid"}];

var timer = setInterval(function () {

num--;

if (num <= 0) {

console.log(" Finished loading ");

clearInterval(timer);

wx.hideNavigationBarLoading() // Stop loading when finished

wx.stopPullDownRefresh();

// datanews.concat(addData);

that.setData({

// listData:that.data.listData.concat(addData)

listData:addData,

})

}

}, 1000)

7, Pull up to load data

/**

* Handling function of page pull bottom event

onReachBottom: function () {

// Pull up and load three times Simulated paging load is complete No more requests

if(this.data.addcount >= 3){

this.setData({

showloading:false,

showloaded:true,

});

return;

}

var addData = [{name:" I am me 123456",img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607331222108&di=2ce09338277db412ca8950ee82ed5ea9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F08%2F20181008185834_sgnqc.jpg",info:" Xiao Xin painting an elephant 123456",url:"https://lol.qq.com/guides/detail.shtml?ADTAG=cooperation.glzx.web&name=Annie&line=mid"}];

var that = this;

var num = 3;

var timer = setInterval(function () {

num--;

if (num <= 0) {

console.log(" Finished loading ");

clearInterval(timer);

wx.hideNavigationBarLoading() // Stop loading when finished

wx.stopPullDownRefresh();

that.setData({

listData:that.data.listData.concat(addData),

showloading:true,

showloaded:false,

addcount:that.data.addcount+1,

})

}

}, 1000)

8, Verification code function , Because I used it text Verification code displayed Out of commission button Of disable function So use global variables disabled To control the text Can I click ...

getyzm: function () {

var _this = this;

var num = 61;

if (!_this.data.disabled) {

var timer = setInterval(function () {

num--;

if (num <= 0) {

clearInterval(timer);

_this.setData({

codename: ' To resend ',

disabled: false,

fontcolor: '#f00'

})

} else {

_this.setData({

codename: num + "s",

disabled: true,

fontcolor: '#00f'

})

}

}, 1000)

}

9, Bottom popup list item Click Select

wx.showActionSheet({

// Write a bottom popup and click event

itemList: ['haha', 'baba'],

itemColor: '#f00',

success: function (res) {

if (res.tapIndex === 0) {

wx.showToast({

title: 'haha',

icon: "none",

})

} else if (res.tapIndex === 1) {

wx.showToast({

title: 'baba',

icon: "none",

})

}

fail: function (res) {

}

}),

10, Page Jump and value transfer I have only learned the most basic That is, by jumping url Pass value

toPageTest: function () {

// Write a jump to listView Interface

wx.navigateTo({ // navigateTo amount to android startActivity Medium activity The standard model

url: '../listpage/listpage?name=123&pwd=123456',

})

And then again listpage Interface onload Parameterized functions get

/**

* Life cycle function -- Monitor page loading

onLoad: function (options) {

var op = options;

console.log(op.name +'is'+ op.pwd)// raymond is male

// Simulate requesting data for the first page

this.getFirstDataNetWork();

tip： Function callback （ Network request / Countdown, etc ）, We all need to put this Conversion can be used , namely var thst = this; Otherwise, global variables cannot be accessed and assigned .

2020-12-16 ADD：

11. Global variable definition and use

In the project app.js The following is added ：

globalData: {

userInfo: null,

hasLogin: "false",

opnid: null

stay page When used inside, it is on the top （page Outside the curly braces ） Write ：

const app = getApp()

Then when you use it, it's OK use app Instead of this

app.globalData.userInfo

12. Bottom switch tab Use （ Must be greater than or equal to 2 individual Less than or equal to 5 individual ）