当前位置:网站首页>Start the first wechat applet (4)

Start the first wechat applet (4)

2020-12-06 10:38:41 osc_ 8ki1usvn

Continue with the previous section , I officially started my development of my little program , Because our company is a small company , So I was the only one who developed this , Learn as you learn , Most of the problems you encounter should be the ones you encounter , Let me first talk about my development ideas

After defining the requirements , First of all, I have to plan my following points according to the structure of the applet

1.WXML( It's quite HTML)
2.WXSS( It's quite CSS)
3.js( Here is more JQUERY Different , Grammar is VUE Of )
4.json( I didn't use it here , I get the data through the interface )


1.WXML

The grammar here is similar to html If you use it often html It's not hard to get started with . It's basically tag grammar . So far, I've come across this kind of thing
 Start the first wechat app ( Four )
The above is the most commonly used tag combination
view amount to html Inside div layer The difference is , You can write the judgment statement directly in the tag wx:if{item} This sentence means if item Not for null Just continue with the label display below wx:for{item} (item It's a json Array set )


Look down again , If the set is not null It will loop out the fields in the collection {{item.Series}} {{item.Price}}

In the label data-aid={{item.id}} This is equivalent to a unique identifier . For example, when you click this line to view the details, it will be transferred to the second page . On the second page ONLOAD Method will receive the current data ID

The logic in the figure above is js Grammatical expression is :
if(item!=null){
for(var i=0;i<item.length;i++){
$("#div").append("<div>"+item[i].id+"</div>");
$("#div").append("<div>"+item[i].Series+"</div>");
$("#div").append("<div>"+item[i].Price+"</div>");




}

}

One thing to note is item Parameters must be written on the page corresponding to JS In the document
data: {} in Or you won't get .

WXSS

This and CSS As like as two peas , I won't talk about it , If not, you can copy the style on the Internet and paste it in , Usage is as like as two peas in the label class=" Style name "

js

The grammatical structure here is very good , But I did angularjs It's not hard to get started with
 Start the first wechat app ( Four )
The picture above is fixed ,data Write global variables in structure , such wxml In order to quote

 Start the first wechat app ( Four )
This is equivalent to .net Medium Onpageload The page only runs when it first loads , Here I write the interface request, get the data, return it and assign the value in item in
The interface request of wechat applet is provided , Grammatical similarity jquery, Pretty simple
wx.request({
url: '/Login/CheckLoginWx', // Just for the sample , Not a real interface address
data: {
Phone: key,
},
header: {
'content-type': 'application/json' // The default value is
},
success (res) {
var result = res.data;
that.setData({
item: JSON.parse(result)
}),














      }
  }}) 

There is one caveat , The assignment of wechat applet is different from that of ordinary syntax, which requires

that.setData({
item: JSON.parse(result)
}),

There are also points to note : In the first request interface, how can not request , Error reporting is an illegal request parameter
original , Wechat is more secure , If you want to test, you have to do some configuration on the development tool

open Set up ----- Item settings check the illegal domain name in the red box
 Start the first wechat app ( Four )

Basically, a simple list of data is done , This time do it here first , Next time, let's talk about data transmission .

版权声明
本文为[osc_ 8ki1usvn]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201206103620251k.html