Wechat applet

Before, the data set of small projects was still being collected and produced, which was a little troublesome. Finally, we prepared to make a small toy (in the form of small program). However, it is a little complicated to use the ready-made small program template, and many grammars are different from those used in web page development. Therefore, while learning, sort out the content of WXML+wxss..

brief introduction

  1. Difference from ordinary web page development

    • Different operating environment
    • Different APIs (you can call various APIs provided by wechat)
    • Different development modes (using wechat developer tools)
  2. Host environment - Mobile wechat

    • Communication model: rendering layer and logic layer, logic layer and communication server
    • operating mechanism
      • Start: download the code package to the local \ (\ longrightarrow \) to parse the app JSON global configuration file \ (\ longrightarrow \) execute app JS entry file (call App() to create an applet instance) \ (\ longrightarrow \) render the homepage of the applet and start it
      • Page rendering: loading json\(\longrightarrow \) loading wxml templates and wxss style \ (\ longlightarrow \) execution js, call Page() to create a page instance, and the rendering is completed
    • assembly
    • API: event listening API (start with on to listen for event triggering), synchronous API (end of Sync), asynchronous API (receive results through callback function)
  3. The difference between WXML and HTML

    • Different tag names - WXML commonly used tag names are: view (similar to div), text (similar to span), image (similar to img), navigator (similar to a)

    • Different attribute nodes

      • <a href="#"> HTML links</a>
      • <navigator url="">WXML link</navigator>
    • Provides template syntax similar to Vue: data binding, list rendering, and conditional rendering

  4. Differences between WXSS and CSS

    • Added rpx dimension units
    • Global style (app.wxss) and local style (< pagename >. Wxss) are provided
    • WXSS does not support some CSS selectors
  5. Collaborative work: administrators, project members (operators, developers, data analysts), experience members

  6. Software version: development version \ (\ rightarrow \) experience version \ (\ rightarrow \) version under review \ (\ rightarrow \) online version

Project structure

  • pages folder: the page where all applets are stored
    • . js file: the entry (script) file of the page, which creates and runs the page by calling the Page() function
    • . json file: the configuration file of the current page (which will overwrite the global configuration)
    • . wxml file: current page template structure file
    • . wxss file: the style sheet file of the current page
  • utils folder: a module that holds the nature of the tool
  • app.js: project entry file, which starts the whole applet by calling App() function
  • app.json: project global configuration file
    • Pages: the path of all pages of the applet
    • window: globally define the background color and text color of all pages of the applet
    • Style: globally defines the version of the style used by the applet component
    • sitemapLocation: indicates the sitemap JSON location
  • app.wxss: project global style files
  • project.config.json: project configuration file, which records the personalized configuration of development tools
  • sitemap.json: configure whether the applet and its page can be indexed (crawled) by wechat

Operating skills

  1. Preview method: you can preview through simulator or wechat scanning code on real machine.

  2. Page configuration: create a page directly in app Add to the pages list in JSON; The first element of the pages list is rendered as the first page of the project.


1. View container class:

  • View: normal view area
  • Scroll view: scrollable view area
  • Swiper and swiper item: carousel chart container component and carousel chart item component
<swiper class="swiper-container" indicator-dots autoplay interval="3000" circular>
        <view class="item">A</view>
        <view class="item">B</view>
        <view class="item">C</view>
<view class="container1">
    <view>Image detection</view>
    <view>Video detection</view>
<scroll-view class="container2" scroll-y>
/* pages/list/list.wxss */

    height: 150px;
    line-height: 150px;
    height: 100px;
    text-align: center;
.swiper-container swiper-item:nth-child(1){
    background-color: aqua;
.swiper-container swiper-item:nth-child(2){
.swiper-container swiper-item:nth-child(3){

.container1 view{
    height: 100px;
    text-align: center;
    line-height: 100px;
.container1 view:nth-child(1){
    background-color: aqua;
.container1 view:nth-child(2){
    background-color: lightpink;
.container1 view:nth-child(3){
    height: 100px;

.container2 view{
    height: 85px;
    text-align: center;
    line-height: 100px;
.container2 view:nth-child(1){
    background-color: aqua;
.container2 view:nth-child(2){
    background-color: lightpink;
.container2 view:nth-child(3){
.container2 view:nth-child(4){
    background-color: rgb(238, 71, 71);
    border: 1px solid rgb(0, 0, 0);
    width: 150px;
    height: 200px;

2. Text component

  • Text: text component

    <text user-select>1051434511</text>
  • Rich text: rich text component

    <rich-text nodes="<h1 style='color: red;'>Title</h1>"></rich-text>

3. button assembly

<button type="primary" size="mini" plain>Main tone mini hollow button</button>

4. Picture component (image)

<image src="/images/bs.jpg" mode="aspectFit"></image>

5. Navigation bar

Keywords: Front-end

Added by XiaoRulez on Sat, 05 Mar 2022 13:54:02 +0200