preface

I summarized all the knowledge points I thought I needed to record after I watched teacher July’s video, mainly for fear of forgetting. My current version is 2.1.0

Including?? “, which means that I have not studied, but will be improved in the future

demo

Follow the teacher in July moOCs video, basically write again, intermittent about a week of time, Teacher in July very detailed, in this wall crack recommended to just like me small white. (I haven’t read much of anything else yet.)

The demo address

The body of the

Logic layer

  1. In combination with the life cycle of applets, interface Settings should not be set in onLoad, preferably after the initial rendering of the page (onReady), for examplewx.setNavigationBarTitle
  2. In the current version, you can only open tabBar with switchTab, while navigateTo and redirectTo can only open non-Tabbar pages
  3. The utility class was introduced using require, which currently does not support absolute paths

The view layer

  1. Only text within the text TAB can be selected with a long press on the phone
  2. Only the text inside the text tag is required to bind data with only two {}.
  3. Checked =”false” checked=”{{false}}” is also true because it is treated as a string and is still true when converted to Boolean.
  4. . Represents an extension operator that expands an object
  5. In the wx:for loop, the default subscript is index and the default item is item, so the following code is recognized
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Copy the code

You can also specify the subscript and current item name with wx:for-index and wx:for-item, respectively

  1. In the list, often andblockUse in combination with, whileblockIt’s just a parenthesis. The part inside the parenthesis is treated as a whole, and is not rendered as a component itself
  2. It is best to use absolute paths in template, because each file that references the template is in a different project location
  3. When using template, both the WXML and WXSS of the template need to be imported into the WXML and WXSS of the target file, respectively
  4. In the current version, the events of the template cannot be handled within the template itself. Instead, specific events need to be written in the object file used. The template encapsulates only the layout and style
  5. Use of template: useisProperty to declare the required use of the template, and then the template requireddataThe incoming
  6. For the use of common layouts, import and include can both introduce the common layout into the target layout, but import can be used if arguments are needed, and include can be used if arguments are not needed, which is equivalent to copying the entire layout
  7. Events need to or don’t care about bubbling (when an event on a component is fired, the event is transmitted to the parent), use Bindtap, don’t bubble use Catchtap (when an event on a component is fired, the event is not transmitted to the parent)
  8. The difference between target, which is the currently clicked component that triggers the event, and currentTarget, which is the component that captures the event, which is the current component of the event binding.
<swiper catchtap='onSwiperTap' indicator-dots='true' autoplay='true'>
    <swiper-item>
      <image src='/resources/imgs/banner_1.jpg' mode='aspectFill' data-postid='0'/>
    </swiper-item>
    <swiper-item>
      <image src='/resources/imgs/banner_2.jpg' mode='aspectFill' data-postid='1'/>
    </swiper-item>
    <swiper-item>
      <image src='/resources/imgs/banner_3.jpg' mode='aspectFill' data-postid='2'/> </swiper-item> </swiper> In the above example, target refers to image and currentTarget refers to swiper, so if you want to get the id of each item, Whether it's target or currentTarget, fetching data is a collection of custom attributes starting with data- on the target componentCopy the code

For example, in the code below, the parent captures the event and the child triggers the event, so the outer layer is currentTarget and the inner layer is target

Note that the WXML parameter name cannot be capitalized, so data-userID is still identified as data-userID. If you want to use a hump, you can use a- separation between words, such as data-user-id. Dataset. UserId can be retrieved as dataset

<view id='view' data-user-id='111' data-name='dad' catchtap='onViewClick'>
  <text id='text' data-user-id='222' data-name='son'>show me</text>
</view>
Copy the code
var Logger = require('.. /.. /utils/Logger.js')

Page({
  onViewClick:function(event){
    Logger.v("onViewClick",event);

    var fatherDataSet=event.currentTarget.dataset;
    var sonDataSet=event.target.dataset;

    var fatherId=event.currentTarget.id;
    var sonId=event.target.id;

    var fatherUserId=fatherDataSet.userId;
    var sonUserId = sonDataSet.userId;

    var fatherName=fatherDataSet.name;
    var sonName=sonDataSet.name;

    Logger.v("fatherId", fatherId);
    Logger.v("sonId", sonId);

    Logger.v("fatherUserId", sonUserId);
    Logger.v("sonUserId", sonUserId);
    
    Logger.v("fatherName", fatherName);
    Logger.v("sonName", sonName); }})Copy the code

Print the event (see currentTarget and target, and the value of the form will be in the detail value)

Print out the rest of the parameters

  1. Dataset is defined bydata-At the beginning, multiple words are composed of characters-Connection, there cannot be capital (upper case will be automatically converted to lowercase) such as data – element – type, in the end. In the event currentTarget. The meeting will be a hyphen to hump elementType dataset.
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Copy the code
Page({
  bindViewTap:function(event) {event. The currentTarget. Dataset. AlphaBeta = = = 1 / / - turn hump writing event. The currentTarget. The dataset, alphaBeta = = = 2 / / capital will be converted to lowercase }})Copy the code
  1. The user input carried by the form component’s submission event is retrieved in event.detail, such as input
  2. Exports: This property allows you to share the module’s private variables and functions, which are used in utility classes, such as

util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':'} /** * network request */function http(netUrl, callBack) {
  wx.request({
    url: netUrl,
    success: function(res) {
      console.log("http response: ", res)
      callBack(res.data);
    },
    fail: function(res) {
      console.log("http error: ", res)
    }
  })
}

module.exports = {
  formatTime: formatTime,
  http: http
}

Copy the code

use

movie-detail.js

var util = require('.. /.. /utils/util.js')

Page({
    onLoad: function(options) {
    wx.showLoading({
      title: 'Loading... ',
    })

    var movieId = options.id;
    var detailUrl = app.globalData.doubanBase + 'v2/movie/subject/'+ movieId; util.http(detailUrl, this.processDoubanData); }})Copy the code
  1. RPX in wechat mini program, analogically understood as DP in Android, can be adaptive according to the screen width
  2. The name of the component’s child components, such as the view.wei-footer component, as well as links and copyright information. Component and child components are connected by two underscores, so distinguish between “-” and “__”
<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link"> </navigator> </view> <view class="weui-footer__text">Copyright © Baidu oh </view> </view>Copy the code
  1. The following shows the styles of all images inside a component that uses the style circle-img (in CSS, this is called the descendant selector)

Look at CSS selectors

.circle-img image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 5%;
}
Copy the code

And I didn’t see that in the official document

In addition:

What are ::before and ::after

  1. Custom Components
  2. – its – what is the filter
  3. What’s – its – transform. For adaptation, it is divided into -moz-animation, -webkit-animation and -o-animation. Keyframes also fall into these three categories.
  4. Use of plug-ins
  5. Plug-in development??
  6. Subcontracting??
  7. Multithreading??
  8. Performance optimization??
  9. If you want to use a drop-down refresh, internalscroll-viewThere will be no response, need to changeview
  10. Control component explicit wX: Difference between if and Hidden:
  11. The image component also has a default value of 300px width and 225px height if it does not set its size
  12. Form submission as a whole Single try??
  13. Media components??
  14. The map
  15. Canvas??
  16. Open capability??
  17. Upload and download, websocket??
  18. Recording?? Camera?? Share??
  19. If you want to debug on the real machine, you can click the remote debugging on the IDE, and a TWO-DIMENSIONAL code will appear, and the real machine can scan the two-dimensional code to debug on the real machine. When you click the exit button on the upper right corner of the small program, you can exit the small program, and enter the small program again, it is still in debugging state (if the debugging is not finished).

  1. Code snippets (I don’t see the benefits of this)
  2. Using plug-ins?
  3. Material management??
  4. Code hosting??
  5. …

Other information

CSS tutorial

Wechat small program official demo

Another video tutorial

How weUI is used

Write in the last

I just entered, what understanding is wrong, welcome to point out more