1. Collaborative development of small programs

1.1 Developer’s Permission Description

  1. Different project members are divided into three roles: operation members, developers, and data analysts.

  2. Description of developer permissions

    • Developer rights: can use the small program developer tools and functions of the small program code management
    • Experiencer rights: you can use the experiencer applet
    • Login Only: You can log in to the background management of small programs without administrator confirmation
    • Development Settings: set the applets server domain name, message push and scan the common link two-dimensional code to open the applets
    • Tencent Cloud management: cloud development related Settings

1.2 How can I add Project members and Experience members

  • Each small program can add a certain number of project members, experience members, the specific restrictions are as follows

  • Personal: 15

  • Certified published non-individual (company) : 90

2. Data binding

2.1 Understand the principles of data binding

  1. Principles of data binding

    • indataData defined in
    • inwxmlData used in

  2. Define the data for the page in data

    In the corresponding.js file of the page, we can define the data in the data object:

  3. The format of Mustache grammar

    Bind data from data to render in the page using Mustache syntax (double braces) to wrap variables. The syntax is as follows

  4. Case code

    data: {
  name: 'Arthur'
}
Copy the code
    <view>{{ name }}</view>
Copy the code

2.2 Dynamically binding properties

  1. Mustache grammar in action

    • Content of the binding
    • Binding properties
    • Operations (ternary operations, arithmetic operators)

  2. Dynamically binding content

    The page data is as follows:

    The page structure is as follows:

  3. Dynamically bound properties

    The page data is as follows:

The page structure is as follows:

  1. Case code

    data: {
  imgSrc: 'http://www.itcast.cn/2018czgw/images/logo.png'
}
Copy the code
    <image src="{{ imgSrc }}" mode="widthFix"></image>
Copy the code

2.3 Ternary Operation

The page data is as follows

The structure of the page is as follows

Case code

data: {
  randomNum: Math.random() * 10 // Generate a random number up to 10
}
Copy the code
<view>{{ randomNum >= 5 ? 'Random number > or equal to 5' :' Random number < 5'}}</view>
Copy the code

2.4 Arithmetic Operation

The page data is as follows

The structure of the page is as follows

Case code

data: {
  randomNum1: Math.random().toFixed(2)}Copy the code
<view>{{ randomNum1 * 100 }}</view>
Copy the code

3. Event binding

3.1 What are events and common events in applets

  1. What is an event

    Events are the means of communication from the render layer to the logic layer. Through events, users’ behaviors generated in the rendering layer can be fed back to the logic layer for business processing

  2. Events commonly used in applets

    • Bindtap, Bindinput, Bindchange
    • Bind :tap, input, and chage
    type The binding way Event description
    tap Bindtap or bind: tap Finger touch and away, similar to the CLICK event in HTML
    input Bindinput or bind: input The input event of the text box
    change Bindchange or bind: change Triggered when the state changes

3.2 Syntax format of bindTap

In applets, there is no ONclick mouse click event in HTML, but a TAP event that responds to the user’s touch behavior

  1. With bindtap, you can bindtap touch events to components

  2. The corresponding event handler is defined in the.js file of the page, and the event parameter is received by the parameter event(commonly abbreviated as e)

  3. Case code

    // button the tap event handler
btnTapHandle (e) {
  // The event parameter object e
  console.log(e)
}
Copy the code
    <view>
  <button type="primary" bindtap="btnTapHandle">button</button>
</view>
Copy the code

3.3 Property list of the event object

When the event callback is triggered, an event object is received with the following detailed properties

attribute type instructions
type String The event type
timeStamp Integer The timestamp when the event was generated
target Object A collection of property values for the component that fires the event
currentTarget Object A collection of property values for the current component
detail Object Additional information
touches Array Touch events, an array of information about the touch points currently staying on the screen
changedTouches Array Touch events, an array of currently changing touch point information

3.4 Differences between Target and currentTarget

  1. targetIs the source component that triggers the event
  2. currentTargetIs the component to which the current event is bound

When an inner button is clicked, the click event bubbles outward, triggering the tap event handler for the outer view as well

At this point, for the outer view:

  1. e.targetSpecify the source component that triggers the event becausee.targetIs the internal button component
  2. e.currentTargetPoints to the component that is currently firing the event, soe.currentTargetIs the currentviewcomponent

3.5 Assign values to data in data in event handlers

The data in the page data can be reassigned by calling the this.setData(dataObject) method

  • Update the data
  • Driver View update

Case code:

// count + 1 processing
changeCount () {
  this.setData({
    count: this.data.count + 1})}Copy the code
<view>
  <button type="primary" bindtap="changeCount">+ 1</button>
</view>
Copy the code

3.6 Event Parameter Transfer

  1. Incorrect event parameter transmission mode

    Event-passing in applets is special; you cannot bind the event and pass parameters to the event handler at the same time; for example, the following code will not work

    Because the applet will treat the attribute value of bindtap as the event name, it is equivalent to calling an event handler function named btnHandler(123)

  2. The correct way to pass event parameters

    The component can be supplied with data-* custom attribute pass-throughs, where * represents the name of the parameter. Example code is as follows:

    In the end:

    • infoIt’s going to be resolved to thetaParameter name
    • The numerical2It’s going to be resolved to thetaThe value of the parameter

  3. Receives the parameters passed by the event

    In the event handler, through event.target.dataset. Parameter name to obtain the value of the specific parameter, the example code is as follows:

  4. Case code

    data: {
  count: 0
}
Copy the code
    // count + 2 processing
bindTap2 (e) {
  this.setData({
    count: this.data.count + e.target.dataset.num
  })
}
Copy the code
    <view>
  <button type="primary" bindtap="bindTap2" data-num="{{2}}">+ 2</button>
</view>
Copy the code

3.7 Syntax format of bindinput

In applets, input events are used to respond to the input events of a text box. The syntax is as follows:

  1. Bindinput allows you to bindinput events to a text box

  2. Define event handlers in the.js file of the page

  3. Case code

    // Get the latest input data in the input
inputHandle (e) {
  // e.dail. value is the latest value entered in the input box
  console.log(e.detail.value)
}
Copy the code
    <view>
  <input type="text" bindinput="inputHandle" />
</view>
Copy the code

3.8 Data synchronization between text boxes and data

  1. Define the data

  2. Rendering structure

  3. Beautify style

  4. Bind the input

  5. Case code

    <view>
  <input value="{{ msg }}" bindinput="setMsg" />
</view>
Copy the code
    data: {
  msg: ` `
}
Copy the code
    // Implement data synchronization between text boxes and data
setMsg (e) {
  this.setData({
    msg: e.detail.value
  })
}
Copy the code
    input {
 border: 1px solid lightcoral;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
Copy the code

4. Conditional rendering

4.1 if.. elif.. else

  1. In the framework, use wx:if=”{{condition}}” to determine if the code block needs to be rendered

  2. You can also add an else block using wx:elif and wx:else

  3. Case code

    <! -- Conditional Render -->
<view wx:if="{{ type === 1 }}">male</view>
<view wx:elif="{{ type === 2 }}">female</view>
<view wx:else>A secret</view>
Copy the code

4.2 Use the if condition based on block labels

  1. If you want to determine multiple component labels at once, you can wrap multiple components with a
    tag and use the WX :if control property on top of it

  2. Note:
    is not a component, it is just a wrapper element that does no rendering in the page, only accepts control properties.

    Case code

    <view wx:if="{{ true }}">
  <view>Arthur</view>
  <view>Da ji</view>
  <view>Meng tien</view>
</view>
Copy the code

4.3 hidden

  1. In the applets framework, hidden=”{{condition}}” can be used directly to control the display and hiding of elements

  2. Case code

    <view hidden="{{ false }}">Hidden if the condition is true, displayed if the condition is false</view>
Copy the code

4.4 Difference between If and Hidden

  1. Run differently

    • wx:ifControl the display and hiding of elements by dynamically creating and removing them
    • hiddenControls the display and hiding of elements by switching styles (display: None /block)

  2. Use advice

    • This parameter is recommended for frequent switchoverhidden
    • This parameter is recommended when the control conditions are complexwx:ifcollocationwx:elif 、wx:elseSwitch between show and hide

6. wxss

6.1 What is WXSS and its relationship with CSS

  1. What is a WXSS

    • WXSS (WeiXin Style Sheets)Is a style language for describingWXMLComponent style of
    • WXSSUsed to determineWXMLHow should the component display

  2. Relationship between WXSS and CSS

    • WXSS has most features of CSS. In order to be more suitable for the development of wechat applets, WXSS has expanded and modified CSS

    • Compared to CSS, the features of WXSS extensions are

      • rpxSize of the unit
      • @importStyle import

6.2 What is RPX and how does it work

  1. What is the RPX

    RPX (Responsive Pixel) is unique to wechat small program, used to solve the screen adaptation of the size unit

    Screen adaptive units

    At present, not only wechat small programs, other small programs also support RPX

  2. RPX implementation principle

    • The implementation principle of RPX is very simple: considering the screen size of different devices, in order to achieve automatic screen adaptation, RPX divides all screen Settings into 750 equal widths, i.e. the total width of the current screen is 750 RPX

      • On smaller devices,1rpx represents a smaller width
      • On larger devices,1rpxRepresents a larger width

    • When running on different devices, the applet will automatically convert the RPX style units to the corresponding pixel units to render the screen fit

6.3 rpx 与 pxConversion between

Designers can use iPhone6 as the standard for visual draft when developing wechat mini programs.

  1. Conversion between RPX and PX

    • In order toiPhone6For example,iPhone6The screen width is375px, there are 750 physical pixels, then750rpx = 375px = 750Physical pixel
    • So 1rpx = 0.5px = 1 physical pixel
    equipment rpxconversionpx(Screen width /750) pxconversionrpx(750/ screen width)
    iPhone5 1rpx = 0.42 px. 1px = 2.34 the RPX
    iPhone6 1rpx = 0.5 px. 1px = 2rpx
    iPhone6 Plus 1rpx = 0.552 px. 1px = 1.81 the RPX

So in other words:

If I’m on the iPhone6,

If you want to draw a box 100px wide by 20px high, convert it into RPX units,

The width and height are 200rpx and 40rpx respectively

  1. RPX and iPhone6 design

    Official advice:

    When developing wechat mini programs, designers can use the iPhone6 as the standard for visual drafts. (iPhone6 design is 750px wide)

    If you want to draw an applet page based on the iPhone6 design, you can simply change the unit from px to RPX.

    For example, suppose the iPhone6 design is to draw a box with a width of 200px and a height of 200rpx

6.4 @importStyle import

Usage scenario: Multiple pages have the same CSS style. You can extract WXSS into separate WXSS files and import them using @import in WXSS of each page

Or declare it in app.wxSS

  1. What is a style import

    • use@importStatement can import an external style sheet
    • Syntax format:@import "relative path of WXSS stylesheet file ";

  2. Syntax format

    • @importFollowed by the outgoing style sheet that needs to be importedRelative pathswith;End of statement
    • @import "relative path of WXSS stylesheet file"

  3. Case code

    @import "/assets/common/common.wxss";
/* @import ".. /.. /assets/common/common.wxss"; * /
​
.box {
  width: 375rpx;
  height: 375rpx;
  background-color: skyblue;
}
Copy the code

6.5 Global Styles

  1. Defined in theapp.wxssThe style is global and applies to each page

6.6 Local Styles

  1. inpage 的 wxssThe styles defined in the file are local and only apply to the corresponding page.And will coverapp.wxssIn the same selector
  2. Note: the global style effect is overwritten only when the local style weight is greater than or equal to the global style weight!

7. Global configuration and page configuration

7.1 app.jsonThe configuration file

The app.json file in the root directory of the applets is used for global configuration of wechat applets.

It determines the path of page files, window presentation, setting network timeout, setting multiple tabs, and so on.

  1. In the app.json configuration file, the main configuration nodes are:

    • pagesArray: Configures the page path of the applet
    • windowObject: used to set the status bar, navigation bar, title, window background color of the applet
    • tabBarObject: Configures the TAB bar effect of the applet

Note:Detailed documentation of global configuration

7.2 pagesThe use of arrays

The Pages array in app.json is used to configure the page path of the applet

  1. Basic configuration

    • pagesUsed to specify which pages the applet consists of, each item corresponds to a page path + file name information.
    • File names do not need to be suffixed, the framework will automatically find the corresponding location.json,.js,.wxml 和 .wxssFour files are processed.

  2. Another way to create a page

    • Open theapp.json –> pagesArray node –> add page path and save –> automatically create the page corresponding to the path

  3. Set the front page of the project

    • Open theapp.json -> pagesAn array of node
    • The default home page can be modified by adjusting the order of the paths in the array as needed

Matters needing attention:

  1. The first item in the array represents the initial page of the applet, which is the home page
  2. To add or subtract pages from the applet, you need to modify the Pages array, otherwise an error will be reported when running the applet

Note:Detailed documentation of global configuration

7.3 Components of the Mini-Program Window

Common attribute configurations:Common property configuration

7.4 Setting the navigation Bar Title

  1. app.json –> window –> navigationBarTitleText
  2. Modify the attribute value

7.5 Setting the Background Color for the Navigation Bar

  1. app.json –> window –> navigationBarBackgroundColor
  2. Change the property value to the specified color

7.6 Setting the navigation bar title Color

  1. app.json –> window –> navigationBarTextStyle
  2. Change the property value to the specified color

7.7 Enabling the Drop-down Refresh function globally

The act of reloading page data by pulling and sliding a finger across a screen

  1. app.json –> window— >enablePullDownRefreshSet the value to true

7.8 Setting the Background color of the drop-down refresh window

When the drop-down refresh function is enabled globally, the default window background is white

  1. app.json -> window -> backgroundColor

7.9 Setting the Drop-down Loading Mode

When the pull-down refresh function is enabled globally, the loading style of the default window is white

1 app.json –> window –> backgroundTextStyle

7.10 Setting the Distance between the Bottom and the Pull-up

The act of pulling and sliding a finger on a screen to load more data

1 app.json –> window –> onReachBottomDistance

Note: The default distance is50pxIf there are no special requirements, you are advised to use the default value

7.11 tabBarThe concept of

TabBar is a common page effect in mobile applications, which is used to quickly switch between multiple pages. Applets are usually divided into bottom tabBar and top tabBar

Note:tabBarIn, you can only configure a minimum of 2 and a maximum of 5 TAB tabs when rendering toptabBarWhen, do not displayiconOnly text is displayed

Note:Tabbar detailed documentation

7.12 tabBarA component of

To display a tabBar on a page, one of the paths corresponding to the tabBar must be the home page

  1. backgroundColor: Navigation bar background color
  2. selectedIconPath: Image path when selected
  3. borderStyle:tabBarThe color of the top border
  4. iconPath: Image path if not selected
  5. selectedColor:tabThe color of the text on
  6. color:tabDefault (unchecked) color for text on

7.13 tabBarConfiguration items of a node

  1. TabBar Configuration item of a node

    attribute type mandatory The default value describe
    color HexColor is . Default text color on TAB. Only hexadecimal color is supported
    selectedColor HexColor is . The color of the text on TAB. Only hexadecimal colors are supported
    backgroundColor HexColor is . The background color of TAB. Only hexadecimal color is supported
    borderStyle string no black The color of the border on the tabBar is supported onlyblack / white
    list Array is . For a list of tabs, seelistProperty description: A minimum of two to a maximum of five tabs
    position string no bottom The location of tabBar is supported onlybottom/ top
    custom boolean no false Custom tabBar

  1. List Configuration items of the node

    attribute type mandatory instructions
    pagePath string is The page path, which must be defined in Pages first
    text string is TAB button text
    iconPath string no Image path, icon size limit is 40KB, recommended size 81px by 81px
    selectedIconPath string no The icon size limit for the selected image path is 40KB and the recommended size is 81px by 81px

Note:

  1. None of them support web images
  2. When Position is top, icon is not displayed.
"tabBar": { "color": "#fff", "backgroundColor": "#ccc", "selectedColor": "#e43130", "position": "top", "list": [{"pagePath": "pages/home/home", "iconPath": "/images/tabs/home.png", "selectedIconPath": "pages/home/home", "text": "iconPath": "/images/tabs/home.png", "selectedIconPath": "/images/tabs/home-active. PNG "}, {"pagePath": "pages/message/message", "text": "message", "iconPath": "/images/tabs/message.png", "selectedIconPath": "/images/tabs/message-active.png" }, { "pagePath": "Pages /contact/contact", "text":" contact us ", "iconPath": "/images/tabs/contact. PNG ", "selectedIconPath": "/images/tabs/contact-active. PNG "}, {"pagePath": "pages/profile/profile", "text": "my ", "iconPath": "/images/tabs/profile.png", "selectedIconPath": "/images/tabs/profile-active.png" } ] }Copy the code

7.14 Relationship between Global And Local Configurations

  1. app.jsonIn thewindowNode that can globally configure the window representation of each page in the applet;
  2. If some applets page wants to have a special window performance, at this point, “page level.jsonConfiguration files can fulfill this requirement;

Note: The page-level configuration takes effect before the global configuration

7.15 Configuring Properties

Page Configuration Can be configured only on the current page

Note:Page Detailed configuration documents

8. Data Request (Network request)

8.1 Limitations on network data requests in applets

  1. For security reasons, applets have two restrictions on data interface requests:

    • Only requestHTTPSType interface
    • The domain name of the interface must be added to the trust list (live)

8.2 Configuring a Legitimate Request Domain Name

Due to the problem of wechat public background rendering, the display became a month can modify 50 times, this is wrong ！！！！ You can only make 5 changes per month

Requirement description: Suppose that in your own wechat small program, you want to request the interface under the domain name https://www.escook.cn/

Configuration steps: Log in to wechat mini program management background -> Development > Development Settings -> Server domain name -> Modify the request legitimate domain name

Note the following when modifying:

  • Domain name onlyhttps (request,uploadFile,downloadFile) andwss (connectSocket) protocol
  • Domain name unavailableIPAddress orlocalhost
  • Domain name must go throughICPFor the record
  • The server domain name can be changed five times in a month

8.3 aGETrequest

Call the wx.request() method provided by wechat applet to initiate GET data request

https://www.escook.cn/api/get
Copy the code

8.4 aPOSTrequest

POST data request can be initiated by calling the wx.request() method provided by wechat applet

https://www.escook.cn/api/post
Copy the code

8.5 Request data as soon as the page loads

In many cases, we need to automatically request some initialized data as soon as the page loads. You need to call the function that gets the data in the onLoad event of the page

8.6 Skipping Request Domain Name Verification

If the backend programmer only provides the INTERFACE of HTTP protocol, but does not provide the interface of HTTPS protocol temporarily, in order not to delay the development progress, we need to temporarily enable the option of “development environment does not verify the requested domain name, TLS version and HTTPS certificate” in the wechat developer tool. Skip server domain name verification. In this case, the server domain name will not be verified in the wechat developer tool or when the mobile phone is in debug mode.

Note: After the server domain name is configured successfully, it is recommended that developers turn off this option for development and test it on each platform to confirm that the server domain name is configured correctly.

8.7 About cross-domain sumAJAXinstructions

  1. Cross-domain problems only exist in browser-basedWebIn the development. Since the host environment of the small program is not the browser, but the wechat client, there is no cross-domain problem in the small program
  2. AJAXThe core of the technology depends on the browserXMLHttpRequestThis object, becauseThe host environment of small program is wechat client, so it can’t be calledMaking AJAX requestsIt’s calledInitiate a network data request