Wechat applet development ③

3、 There are ways to create new wechat pages 3 Kind of

1. from app.json File creation begins

2. Create individual files one by one

3. The compilation after deleting the file is automatically created

stay page Left click to create a new directory （ Such as new construction about, stay about File left key -> left-click : newly build page-> Four pages appear (about.js、about.json、about.wxnl、about.wxss

How to see the code page to edit ：

stay app.json On the page page Put the path first
Add compilation mode —》 Set the relevant name and path .

4、 The hierarchical relationship created by the new page

1. All pages are in pages In file , You can also locate other customized files by yourself , such as page

2. Create a page in a folder （ It's easy to create , Clear code ）

3. Create multiple pages in one folder （ A clear hierarchy ）

 stay page Left click to create a new directory （ Such as new construction  about, stay about File left key -> left-click : newly build page-> Four pages appear (about.js、about.json、about.wxnl、about.wxss

 How to see the code page to edit ：

 stay app.json On the page page Put the path first and add the compilation mode —》 Set the relevant name and path .

5、 The hierarchical relationship created by the new page

Corresponding relation

WXML -> HTML

WXSS -> CSS

JS -> Javascript

JSON -> Javascript（json object ）

App -> application

Coding requirements

Can't be used directly HTML file

You can use it all CSS file

Js The script file does not Window object

There is no window object , Out of commission dom structure

app It is a global application

label

Corresponding relation

view -> div
text -> font + span

navigator -> a ( Jump from the root directory )

Components

You just need to WXML Write the corresponding component tag name to display the component on the interface , for example , You need to display the map on the interface , You just need to write like this ：

6、 Register applet

Every applet needs to be in app.js Call in App Method to register an applet instance , Bind lifecycle callback function 、 Error listening, no listening function on the page, etc .

// app.js
App({
    
  onLaunch (options) {
    
    // Do something initial when launch.
  },
  onShow (options) {
    
    // Do something when show.
  },
  onHide () {
    
    // Do something when hide.
  },
  onError (msg) {
    
    console.log(msg)
  },
  globalData: 'I am global data'
})

There is only one... In the whole applet App example , It's all page sharing . Developers can use getApp Method to get the globally unique App example , obtain App The data on or call the developer to register in App The function on .

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

7、 Registration page

For each page in the applet , All need to be mapped on the page js Register in the file , Specify the initial data for the page 、 Lifecycle Callback 、 Event handling functions, etc .

** Use Page Constructor registration page **
Simple pages can be used Page() Construct .

//index.js
Page({
    
  data: {
    
    text: "This is page data."
  },
  onLoad: function(options) {
    
    //  Execute... When the page is created 
  },
  onShow: function() {
    
    //  Execute... When the page appears in the foreground 
  },
  onReady: function() {
    
    //  When the page is rendered for the first time 
  },
  onHide: function() {
    
    //  Execute when the page changes from foreground to background 
  },
  onUnload: function() {
    
    //  Execute... When the page is destroyed 
  },
  onPullDownRefresh: function() {
    
    //  Execute when the pull-down refresh is triggered 
  },
  onReachBottom: function() {
    
    //  Execute when the page hits the bottom 
  },
  onShareAppMessage: function () {
    
    //  When a page is shared by a user 
  },
  onPageScroll: function() {
    
    //  Execute... When the page scrolls 
  },
  onResize: function() {
    
    //  Execute when page size changes 
  },
  onTabItemTap(item) {
    
    // tab  Execute when clicked 
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  //  Event response function 
  viewTap: function() {
    
    this.setData({
    
      text: 'Set some data for updating view.'
    }, function() {
    
      // this is setData callback
    })
  },
  //  Free data 
  customData: {
    
    hi: 'MINA'
  }
})

The user did not trigger before sending

Any applet is a app object , So enter yes app.js

onLaunch Create a method of initializing applet at the beginning

Every page starts onLoadonReady

Used on the page behaviors

The page can refer to behaviors . behaviors It can be used to make multiple pages have the same data fields and methods .

// my-behavior.js
module.exports = Behavior({
    
  data: {
    
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    
    sharedMethod: function() {
    
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})

// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
    
  behaviors: [myBehavior],
  onLoad: function() {
    
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

Logical code modulation method

Console display mode console.log() console.info()

pop-up (API Framework )

wx.showToast({
    
    title: 'this is about page',
})

simulation , Real mode
Click on the compilation , preview , Real machine debugging

Logical code modulation method
Console display mode console.log() console.info()
pop-up (API Framework )

7、 Release steps of wechat applet

Test, release and upload after wechat applet development ：

Test number ： Cannot upload

APPID： Can be uploaded —> Upload wechat public platform ( Subscription number , Service number )： Applet management ) can ( relation )

8、 Function introduction

compile ： Save the existing code 、 to update

preview ： The system generates QR code , After scanning the code with wechat, you can see it on the mobile terminal

Real machine debugging ： Also generate QR code , You can check the operation on the mobile terminal , At the same time PC There are debugging results on the end
Cut backstage ：

Clear cache ： Clear all kinds of cache files left during operation

version management ： With the help of git, Complete the control of the current wechat applet version , You can do any version control . Such as push , Grab, etc , You can also create branches and merge branches

Community ： Internet jump link , Jump to wechat applet Forum
In the help menu of the development tool

Test number ： Internet jump link , Jump to wechat open documents - Test number application page

Upload （APPID Only then ）： Provide uploading code to wechat open platform

9、 Release steps of wechat applet

1、 Click on “ Upload ” Button , Upload wechat public platform ( Operation of small programs and games )

Be careful ： Only when there is a formal APPID This button is only available when , There is no testing environment

2、 Wechat open platform ： Native Android and ios Developed interface operation , Provide interface as a third-party mobile program , Users can publish the content of third-party programs to friends or share it with friends , Third party content is more widely spread with the help of wechat platform . Thus formed a mainstream online and offline wechat interactive marketing .

3. Open wechat public platform

Click on “ Submit audit ”

4. Three states

Development version
Audit version
Online version

At the same time, it also corresponds to three permissions

Public platform service number 、 Subscription number 、 Relevant instructions of enterprise wechat and applet

1、 Subscription number ： It mainly focuses on conveying information to users （ Similar newspapers and magazines ）, Before and after certification, only one message can be sent in groups every day ;

2、 Service number ： It mainly focuses on service interaction （ Similar bank ,114, Provide service queries ）, Before and after certification, it can be sent in groups every month  4  Bar message ;

3、 Enterprise WeChat ： It is a product for the enterprise market , It's an independent  APP  Good basic office communication tools , With the most basic and practical functional services , Special for enterprises  IM  product .（ Applicable to the enterprise 、 The government 、 Public institutions or other organizations ）;

4、 Applet ： It's a new kind of openness , Developers can quickly develop a small program . Small programs can be easily obtained and disseminated in wechat , At the same time, it has an excellent use experience .

10、 Wechat applet components use -1

A、 Applet basic components icon,text

Icon Icon components

1、 attribute ：type icon type The attribute values that can be enumerated are success,success_no_circle,info,warn,waiting,cancel,download,search,clear

2、 attribute ：size 23 The default value is , Unit pixel

3、 attribute ：color Color setting

Text Text component

Attribute observation Wechat online dictionary

B、 Applet basic components button,input

C、 Case presentation ： Wechat registration page

11、 Wechat applet framework component view,swiper The use of

01、 Applet basic components view and swiper

View Component is introduced

Equivalent to Div

Attribute observation Wechat online dictionary

swiper Component is introduced

Can play a slider effect
attribute
1、autoplay boolean false no Auto switch or not

2、interval number 5000 no Auto switch interval

3、duration number 500 no The length of the slide animation

4、indicator-dots boolean false no Display panel indicator

5、indicator-color color rgba(0, 0, 0, .3) no Indicate the color

6、current number 0 no The current slider index Swiper-item Format operation

7、 Change the current of the slider video current

changeCurrent(event){
    
    console.log(event.detail.current);
}

8、 Increase the height of vertical rolling

<swiper
style=“height: 200px”
vertical
current=“1”
bindchange=“changeCurrent”
autoplay