I. Preface:

Recently, the company wants to make a small program, which I have not contacted before, but I have used the Vue framework, so I directly started to use it. After all, the idea is very similar. But the micro channel small program pit or some, today on the idea, if there is a demand can be a detailed article. Please correct any mistakes.Copy the code

2. Wechat restrictions

  • Talk about the limitations of wechat
    • You can switch a maximum of five tabs
    • The relationship between the parent page and child page cannot exceed 5
    • The number of files packed online cannot exceed 2 MB
    • Disallow jumping to third party links (this is important and causes many features to fail)
    • You can’t download APP directly to the button
    • The embedded H5 can only be displayed, but cannot be manipulated
    • There’s no DOM in the applet
    • Applets cannot use local images as background images

3. Difficulties encountered

  • Rendering HTML

    • ​Problem: The background gives me the code to return HTML and let me render in the applet
    • Difficulty: Applets do not support DOM
    • Plan: Written by the great godwxParseDOM nodes can be rendered​Github.com/icindy/wxPa…

  • Two-dimensional code generation

    • Problem: to dynamically generate two-dimensional code according to the URL given by the background
    • Difficulty: Applets do not support DOM
    • Solution: Qrcode written by Daishen github.com/yingye/weap…

  • Wechat API problems

    • Problem: There is a problem with wechat’s API for downloading files` ` wx. DownloadFile ()It can be used on PC, but not on mobile, and the URL should be under a domain name
    • Solution: Because we want to download the picture, wechat has an API to preview the picture, and this long press can be downloadedWx.previewimage () shows the image

  • Template Indicates the usage of the template

    • Use:

      1. Json file cannot import template files such as page/template/teplate

      2. In the parent page of the WXML and WXSS files import template to the corresponding WXML and WXSS files

        Wxml file:

        <import src=".. /tampmask/tampmask.wxml" />

        < the template is = "tampmask" data = "{{to show}}" / >

        Note the two slashes on the end note!!

        The corresponding tampmask template:

        <template name="tampmask"></template>

        WXss file:

        @import ‘.. / tampmask tampmask. WXSS ‘;

        Js file:

        Template. js in a template is not rendered to template.js but written to the import template file

  • To avoid errors, use double quotes.

  • {{}} can not use toFixed() function, should be converted in JS, and then render in {{}}

  • Global variables can be set in child pages, introducing the APP () object

  • Wechat can realize the function of pull-down refresh. Wechat has a pull-down API, which can display and hide the refresh by obtaining the value

Fourthly, construct opinions

  • If there are many H5 embedded pages, do not write a page for each page, a module to introduce a

    file, according to the value passed in to determine which display, otherwise it will be very messy
  • Styles can be introduced into the WEUI library to fit the style of wechat
  • As for login and registration, wechat can directly obtain the mobile phone number without special login and registration page
  • The login value can be placed in a global variable or localStroge (although global variables are recommended).
  • For templates, write all templates in the same template file. Do not write more than one template file, and use different names to distinguish and reference.

Thank you. If you have any questions, please join us

By:Beast (Qiyun)

The original ban assault