Introduction to Zhihu Daily report Development example for WeChat mini-app edition

I believe that everyone has recently been screened by small programs, so I was shocked by the pressure of Zhihu Daily, a small program version, during the weekend. This article mainly aims to summarize the development experience, and step on. For more information, see. This article describes the demo of Zhihu Daily Report for the mini-app version.

I believe that everyone has recently been screened by small programs, so I was shocked by the pressure of Zhihu Daily, a small program version, during the weekend. This article mainly aims to summarize the development experience, and step on. For more information, see.

First Look

 
  
   
    
   
    {{userInfo.nickName}}
    
   
   
   
    {{motto}}
    
  
 

/**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 // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo })})}})

The code is displayed under index in the newly created Project. next we will introduce wxml wxss js

Wxml

This is the description file of the page structure, mainly used for the following content

1. specify the component usage as a tag

2. use commands such as wx: for wx: if to complete logical processing on some templates.

3. bind an event using bind *

Wxss

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

You can also use the import command to import an external style file.

@import "common.wxss";.pd { padding-left: 5px;}

Js

Page logic control, compliant with commonJs specifications

// util.jsfunction formatTime(date) { // ....}function formatDate(date, split) { // ...}module.exports = { formatTime: formatTime, formatDate: formatDate}var utils = require('../../utils/util.js')

Js is not running in the browser environment, so window. * errors will be reported for this type of code, and dom operations are not allowed. Currently, the official website does not seem to support running of other js libraries and is completely closed. This should be improved in the future.

Use the Page method on the Page to register a Page

Page ({data: {// text: "This is a Page"}, onLoad: function (options) {// parameters brought about by Page initialization options for Page navigation}, onReady: function () {// page rendering completed}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed }})

When we need to change the bound data, we must call the setData method for modification to trigger the page update, as shown in the following code:

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

Conditional rendering and list rendering

The following content is from the official documentation.

Use of appletswx:if=""Complete Conditional rendering, similar to vue's v-if

 
   True 
 

You can also usewx:elifAndwx:else To add an else block:

 
   1 
 
 
   2 
 
 
   3 
 

wx:forBind the control property to an array to repeatedly render the component using the data in the array.

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

 
   {{index}}: {{item.message}}
 Page({ items: [{ message: 'foo', },{ message: 'bar' }]})

Usewx:for-itemYou can specify the variable name of the current element of the array.

Usewx:for-indexYou can specify the variable name of the current base object of the array:

 
   {{idx}}: {{itemName.message}}
 

Event binding

Wxml is only usedbind[eventName]="handler" Syntax binding event

 
  
   tap
  
 Page({ bindViewTap: function(e) {  console.log(e.taget) }})

Passdata-*Ande.target.dateset Pass parameters

 
  
   
Tap
  
 Page ({bindViewTap: function (e) {// it is automatically converted to console. log (e. taget. dataset. testMsg) // }})

Current pitfalls

Binding event e.target.dataset

When you bind events and parameters to the parent component and click it, the child component bubbles the event to the parent component. at this timee.target.dataset Null

  
  
   
    
Tap
   
  
 Page ({bindViewTap: function (e) {console. log (e. taget. dataset. testMsg) // undefined }})

Online image loading is unstable

In Zhihu Daily, a large number of images need to be downloaded from the internet. The image Component Display is extremely unstable, and many images cannot be displayed.

Summary

The small program is still in the beta phase, and many problems need to be improved. However, it is still good for the development speed and experience. We look forward to the official release of the program on that day. The above is all the content in this article. I hope it will help you learn how to use applets.

The above is the details about the daily report development instance for the small program version. For more information, see other related articles in the first PHP community!