First, understand the micro channel small program

Wechat Mini Program, a kind of small Program, The English name of Wechat Mini Program, is a kind of application that can be used without downloading and installing

Two, wechat small program and ordinary H5 difference

  1. Wechat applet uses developer tools to view preview pages, and H5 uses browser to view rendered pages
  2. Wechat applet extends the underlying capability, and H5 calls the underlying capability is relatively weak
  3. Wechat mini program does not have complete JS API, but H5 has complete JS API (EcmaScript,DOM,BOM) development capability
  4. Different rendering mechanism: Wechat small program rendering thread and logical thread are independent and parallel running, while H5 is just a thread

Three, wechat small program use process

WeChat applet account registration Registered address: mp.weixin.qq.com/wxopen/ware… A small program that register login background: development – > Settings – AppID (ID) installation WeChat developer tools Download address: developers.weixin.qq.com/miniprogram… Create a small program project

Happy to develop projects with small programs…

How to preview a project on mobile

Click wechat developer tools at the top of the preview small program how to add development members wechat small program background -> management -> member management -> member management

Four, micro channel small program development directory description

The Pages project development directory is equivalent to the SRC directory in the Vue scaffolding

A complete applet page includes 4 parts:

1. Xxx. WXML: Template page (also called view, similar to HTML)

Block: tag An organized area that will not eventually be rendered to the page. It is equivalent to a template in vueCopy the code

2. Xxx. WXSS: A page style equivalent to CSS

Note: RPX is used to represent the response units similar to REM

3.xxx.js: write page logic 4.xxx.json: page configuration

Note: The JSON configuration for the page is derived from the Window field in the global (app.json) configuration

Refer to official documents: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window deposit utils package tool function directory app. Js Is the entry js file of the applet equivalent to the main.js in vue to implement the global configuration of the app.json applet through the App({}) constructor

Such as:

{
// All page paths managed by the applet
  "pages": ["pages/index/index"."pages/logs/logs"].// The window representation of the applet
  "window": {"backgroundTextStyle":"light"."navigationBarBackgroundColor": "# 000"."navigationBarTitleText": "1909A"."navigationBarTextStyle":"white"
  },
  "style": "v2"."sitemapLocation": "sitemap.json"} app. WXSS is the global CSS style of the applet, which affects the appearance of all pages of the applet."pages": [
    "pages/index/index"."pages/logs/logs"."pages/cate/cate"."pages/shopping/shopping"],... }Copy the code

The default tabBar is at least 2 items and at most 5 items

But you can break through this limitation by customizing the tabBar

How to implement a custom TabBar?

Create a custom tanB component by disabling the default tabBar in app.json

Official Reference: [HTTPS://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html](%60https://developers.weixin.qq.com/min iprogram/dev/reference/configuration/app.html#window%60)
Copy the code

WXSS related RPX: (responsive Pixel) : Can adapt according to the width of the screen

Use: how much to use how much to measure 100px in PS, which is 100rpx

Reference designers can use the iPhone6 as a standard for visual sketches

Style import: @import is mainly used for complex project style reuse applets commonly used rendering directives 1. Traversing Wx :for is equivalent to v-for for vue

Such as:

 <view wx:for="{{ list2 }}" wx:for-index="n" wx:for-item="itm">
           <text>Id: {{n+1}}-- Name: {{itM.name}}</text>
 </view>
 
Copy the code

Note: Item: each item traversed index: subscript of each item Wx :for-index: changes the subscript name Wx :for-item: changes the name of each item

2. Conditional rendering

Wx :if is equivalent to v-if of vue. -if True: displays the value. False: hides the value

Wx: If conditions are met, render. Wx: Else Conditions are not met

Hidden is equivalent to the inverse value of Vue’s V-show true: hides, false: shows

Bind + event name =” method name”

Such as:

 <button bindtap="deleteItem">X</button>
 
// How to solve the problem that views are not synchronized during the interaction?
 
 this.setData()
 
   this.setData({
     list2: this.data.list2
   })
 
 
// How to pass parameters between pages
// Custom properties: pass parameters on the page to JS< View data- custom name ="Parameter value">
  
 // Receive the event method by firing the event
 
  let {index}=e.currentTarget.dataset
  
  deleteItem(e) {
    let {index}=e.currentTarget.dataset
    console.log(index)

   
  },
Copy the code

Route forwarding parameters: Parameters transmitted between pages