Micro-Credit Program version of the daily development of a case-related tips

Look at the effect chart first.

Development environment Preparation

The small program came out the next day was cracked, the third day micro-letter on the development tools to download, now only need to download the micro-trust developer tools can be used,

When you create a project, you choose to have no appid, so there will be no AppID validation.

Directory structure

1, app.js Registration app logic, APP.WXSS global style file App.json configuration information

2, pages to store the page file

3, Utils tool class code

4. Images Picture Resource file

Every page in the applet will have three files. wxml. wxss. js, corresponding to the structure, style, and logic, equivalent to the Web page HTML css and JS relationship.

Develop the first page

Code from New Project

<!--index.wxml-->
<view class= "container" > <view bindtap= "Bindviewtap" class= "userinfo"
 >
 <image class= "Userinfo-avatar" src= "{Userinfo.avatarurl}}" background-size= "Cover" ></image>
 <text class= "Userinfo-nickname" >{{userInfo.nickName}}</text>
 </view>
 <view class= "Usermotto" >
 <text class= "User-motto" >{{motto}}</text>
 </view>
</view >

/**index.wxss**/
. userinfo {
 Display:flex;
 Flex-direction:column;
 Align-items:center
}

. Userinfo-avatar {
 width:128rpx;
 HEIGHT:128RPX;
 MARGIN:20RPX;
 border-radius:50%
}

. userinfo-nickname {
 color: #aaa;
}

. Usermotto {
 margin-top:200px;
}

Index.js
//Get application instance
var app = Getapp ()
Page ({
 data: {
 motto: ' Hello World ',
 userInfo: {}
 }} ,
 ///event handler function
 bindviewtap:function () {
 wx.navigateto ({
  URL: ' ... /logs/logs '
 }
 },
 onload:function () {
 console.log (' OnLoad ') var that =-this
 // Invokes the method that applies the instance to get the global data
 app.getuserinfo (function (userInfo) {
  //Update data
  that.setdata ({
  userInfo: UserInfo})}})

New project, the index will see the code, and then introduce Wxml WXSS JS

Wxml

This is a description of the page structure, mainly for the following

1, use the label form to specify the component usage <view></view>

2, using wx:for wx:if and other instructions to complete a number of templates on the logical processing

3. Binding Events using bind*

Wxss

The style file is basically the same as the CSS syntax, but the supported selector syntax is limited look here, you can use Flexbox to complete the layout.

External style files can also be introduced internally using the import command

@import "COMMON.WXSS";

PD {
 padding-left:5px;
}

Js

Page logic control, follow COMMONJS specification

Util.js
function Formattime (date) {
 //...
}

function FormatDate (date, split) {
 //...
}
Module.exports = {
 formattime:formattime,
 formatdate:formatdate
}
var utils = require ('.. /.. /utils/util.js ')

JS here is not in the browser environment, so window.* this kind of code will be an error, DOM operation is not allowed, the official at present seems to be unable to support the other JS library operation, fully enclosed, this should be gradually improved.

Page method is used to register a page

Page ({
 data:{
 //text: "This is a page"
 },
 onload:function (options) {
 ////page initialization options for page jump parameters },
 onready:function () {
 //page render complete
 },
 onshow:function () {
 //page display
 },
 Onhide:function () {
 //page Hide
 },
 onunload:function () {
 //page Close
 }
})

When we need to change the bound data, we must invoke the SetData method modification to trigger the page update, like this:

Page {
 data: {
  text: ' This is a page '
 },
 onload:function () {this.setdata {
   text: ' This is page '
  })
 }
})

Conditional Rendering and list rendering

The following information is from the official micro-credit document.

Small programs are wx:if="" rendered using completion conditions, similar to the Vue v-if

<view wx:if= ' {condition}} ' > True </view>

You can also use wx:elif and wx:else to add an else block:

<view wx:if= ' {length > 5}} ' > 1 </view>
<view wx:elif= ' {{length > 2}} ' > 2 </view>
   <view wx:else> 3 </view>

wx:forControl property to bind an array, you can use the data of the items in the array to repeatedly render the component.

Built-in variable index (subscript for array traversal), item (each of the array traversal)

<view wx:for= "{{items}}}" >
 {Index}}: {{item.message}}}
</view>
Page ({
 items: [{
 Message: ' foo ',
 },{message
 : ' Bar '
 }]
}

Use wx:for-item variable names that can specify the current element of an array

Use wx:for-index the variable name that can specify the current subscript of the array:

<view wx:for= "{{array}}" wx:for-index= "idx" wx:for-item= "ItemName" >
 {{idx}
}} </view>

Event Bindings

Wxml only uses bind[eventName]="handler" syntax to bind events

<view bindtap= "Bindviewtap" class= "userinfo" ><text>tap</text></view>
Page ({
 Bindviewtap:function (e) {
  console.log (e.taget)
 }}
)

Passing data-* and e.target.dateset passing parameters

<view bindtap= "Bindviewtap" data-test-msg= "La la la la" class= "userinfo" ><text>tap</text></view >
Page ({
 bindviewtap:function (e) {
  //will automatically be turned into hump-style name
  Console.log (e.taget.dataset.testmsg)//La La la la la
 }
})

The pits that have been trampled at present

In event bindings e.target.dataset

When the parent component binds events and parameters, click on the subassembly bubbling event to the parent component, this time e.target.dataset is empty

<view bindtap= "Bindviewtap" data-test-msg= "La la la la" class= "userinfo" >
 <view><text>tap</ text></view>
</view>
Page ({
 bindviewtap:function (e) {
  Console.log ( E.TAGET.DATASET.TESTMSG)//Undefined
 }
})

Online image loading is unstable

There are a lot of pictures to be downloaded from the Internet in the Daily News, where the image component is shown to be extremely unstable, and many pictures are not displayed.

Summarize

Micro-Letter applet is still in beta, there are many problems need to be improved, but for the development speed and experience is still good, look forward to the official release of that day. The above is the entire content of this article, I hope to learn to use micro-letter Small program can help.