Notes on Getting Started with Mini Programs (1) Front-end WeChat Mini Program Development Tutorial for Dark Horse Programmers

Basic introduction to WeChat mini programs

There are the following differences between mini programs and ordinary web pages:

1. Running environment: Mini programs can run directly on the mobile phone's operating system, such as WeChat, Alipay, etc.; ordinary web pages need to be opened in a browser to run.

2. Development technology: Mini programs are developed using front-end technologies, such as HTML, CSS, JavaScript, etc.; ordinary web pages are also developed using similar front-end technologies.

3. User experience: Mini programs can provide a more native user experience and can call the functions of mobile phone hardware devices, such as cameras, geolocation, etc. However, ordinary web pages are relatively limited in calling these functions.

4. Security: Mini programs run in a closed environment, have high security, and need to pass platform review before they can be launched online; while ordinary web pages have relatively low security and are vulnerable to network attacks.

5. Distribution method: Mini programs can be distributed through the app store, and users can easily search, download and update them; ordinary web pages need to be found through link sharing or search engine searches.

6. Permission control: Mini programs can perform fine-grained control over user permissions, such as obtaining the user's geographical location, accessing mobile photo albums, etc. However, because ordinary web pages run in browsers, their permissions are restricted and cannot perform these operations.

7. Storage capability: Mini programs can store data locally, including user configuration, cache, etc.; while ordinary web pages can usually only have limited local storage through cookies or localStorage.

8. Cross-platform support: Mini programs can support multiple operating systems at the same time, such as iOS and Android; while ordinary web pages can run on almost any modern browser, making them more cross-platform.

9. Update mechanism: When the mini program is updated, users do not need to download it manually. The platform will automatically push the latest version to the user; while ordinary web pages require users to manually refresh the page to obtain updates.

10. Development restrictions: The development of small programs is strictly restricted by the platform, needs to comply with certain specifications and requirements, and its functions are subject to certain restrictions; while the development of ordinary web pages has a relatively high degree of freedom.

To create your first WeChat mini program, you can follow these steps:

1. Register as a WeChat public platform developer: Visit the WeChat public platform (mp.weixin.qq.com) and use your personal WeChat account to register as a developer.

2. Create a mini program: After logging in to the WeChat public platform, select "Develop" in the menu, then click "Mini Program" to enter the mini program management page. Click the "Add Mini Program" button, fill in the basic information of the Mini Program, including name, AppID, introduction, etc., and upload the Mini Program's icon and cover image.

3. Improve Mini Program settings: In the Mini Program management page, you can set the basic configuration items of the Mini Program, including setting the server domain name, business domain name, payment configuration, etc.

4. Development tool download: Download WeChat developer tools for the development and debugging of small programs. WeChat developer tools can be downloaded from "Development" - "Development Tools" on the WeChat public platform.

5. Create a mini program project: Open the WeChat developer tools, click "New Mini Program Project", fill in the mini program's AppID and project directory, and click "OK" to create the mini program project.

6. Develop mini program pages: In the WeChat developer tools, you can write the page code, style and logic of the mini program, and use the preview function to view the effect of the mini program in real time.

7. Publish a mini program: After completing the development of the mini program, you can click the "Upload" button in the WeChat developer tools to upload the mini program to the WeChat public platform for review. After passing the review, the mini program can be released for users to use.

After creating a mini program project, you can develop it according to the following sample code:

1. In the root directory of the mini program project, find the app.json file and configure the global configuration information of the mini program, such as page path, window style, etc.

Sample app.json file content:

{
    
    
  "pages": [
    "pages/index/index",        // 小程序首页
    "pages/about/about",        // 关于页面
    "pages/contact/contact"     // 联系页面
  ],
  "window": {
    
    
    "navigationBarTitleText": "我的小程序",  // 导航栏标题文字
    "navigationBarBackgroundColor": "#ffffff"  // 导航栏背景颜色
  },
  "tabBar": {
    
    
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
    
    
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }
}

2. Create a page file for the mini program. Each page corresponds to a folder, including .js, .wxml, .wxssand.json files.

Example index.js file content:

Page({
    
    
  data: {
    
    
    message: 'Hello, 小程序!'
  },
  onLoad() {
    
    
    console.log('页面加载完成')
  },
  onTap() {
    
    
    this.setData({
    
    
      message: '点击了按钮'
    })
  }
})

Example index.wxml file content:

<view>
  <text>{
   
   { message }}</text>
  <button bindtap="onTap">点击我</button>
</view>

Example index.wxss file content:

text {
    
    
  font-size: 16px;
  color: #333333;
}

button {
    
    
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
}

Example index.json file content (optional, used to configure special styles of the page):

{
    
    
  "navigationBarTitleText": "首页",  // 页面标题
  "enablePullDownRefresh": true  // 允许下拉刷新功能
}

The above code example demonstrates a simple applet page, which contains a text box and a button. Clicking the button will change the content of the text box.

Through the above examples, you can start developing and debugging small programs. Click the preview button in the WeChat developer tools to view and test the effect of the mini program in the simulator.

Small program structure

JSON configuration file

In the development of WeChat applet, JSON configuration file is a file format used to configure the running environment of the applet. Common JSON configuration files in mini programs include app.json, page.json, component.json, etc.

Among them, app.json is the global configuration file of the mini program, including the paths, window styles, network configurations, etc. of all pages. Other JSON configuration files are used to specify special styles and behaviors for specific pages or components.

The following takes app.json as an example to introduce some common configuration options:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序示例",
    "navigationBarTextStyle": "black"
  }
}

Among them, the pages attribute specifies the page path list contained in the mini program. There may be multiple pages here, and each page needs to correspond to one .js, .wxml, .wxss and .json files.

The window attribute is used to specify the style and configuration options of the applet window. For example, the navigationBarTitleText property specifies the navigation bar title text, the navigationBarBackgroundColor property specifies the navigation bar background color, and the backgroundTextStyle property specifies the style of the drop-down animation, etc.

The app.json file can also specify the network configuration, sharing configuration, debugging mode and other options of the mini program. For details, please refer to the WeChat Mini Program documentation.

JSON configuration files are an important part of the development of WeChat mini programs. Through configuration files, the global configuration, page configuration, component configuration and other features of the mini program can be realized.

app.json
In the WeChat applet, app.json is the global configuration file of the applet, which is used to specify the global properties and page path of the applet.

Here are some common app.json configuration options:

1. pages: used to specify the path list of all pages contained in the mini program, each page corresponds to one .js, .wxml, .wxssand.json files. The page path is the path relative to the root directory of the applet. For example: "pages/index/index" means the page in the pages directory under the root directory. index

2. window: used to specify the style and configuration options of the mini program window. For example, the navigationBarTitleText attribute specifies the navigation bar title text, the navigationBarBackgroundColor attribute specifies the navigation bar background color, and the backgroundTextStyle attribute specifies the style of the drop-down animation, etc.

3. tabBar: used to specify the tab bar at the bottom of the mini program, including the tab's icon, title, page path, etc. Each tab corresponds to a page, and users can switch pages by clicking on the tab.

4. networkTimeout: used to specify the network request timeout of the applet, in milliseconds.

5. debug: used to specify the debugging mode of the mini program. The default is false. When enabled, more debugging information will be output.

6. permission: used to specify the system permissions that the mini program needs to use, such as geographical location, camera, microphone, etc.

The above are just some common configuration options. For specific configuration options, please refer to the WeChat Mini Program documentation.

In short, app.json is an important part of the development of WeChat mini programs. By configuring the app.json file, you can specify the global properties and page path of the mini program, thereby realizing the global configuration of the mini program.

project.config.json
project.config.json is the WeChat applet project configuration file, which stores some project configuration information in the developer tools. This file is usually located in the root directory of the applet project.

Here are some common project.config.json configuration options:

1. appid: used to specify the AppID of the mini program, which is the unique identifier of the mini program. A unique AppID is automatically generated when creating an applet.

2. projectname: used to specify the project name of the applet.

3. description: used to specify the description information of the applet.

4. compileType: used to specify the compilation type of the mini program, which can be "miniprogram" (miniprogram) or "plugin" (plugin).

5. setting: used to specify some setting options of developer tools, such as whether to automatically open debugging tools, whether to generate compressed packages, etc.

6. packOptions: used to specify some configuration options for mini program packaging, such as whether to generate sourcemap files, whether to compress images, etc.

7. minGameVersion: used to specify the minimum version number of the mini game adaptation library.

The above are just some common configuration options. In fact, project.config.json can also contain other configuration options. For details, please refer to the WeChat applet documentation.

In short, project.config.json is the project configuration file in WeChat applet development. By configuring this file, you can set some basic information of the applet and the behavior of the development tools.

sitemap.json
The sitemap.json file is the configuration file of the "mini program search" of the WeChat applet and is used to submit the page path of the applet to the WeChat server. , page title, page parameters and other information so that WeChat can display the content of the mini program in the search results.

The sitemap.json file is usually located in the root directory of the mini program project. Its main configuration options include:

1. rules: used to specify the rules of the mini program page. Each rule contains a name field and a page field, where name represents the page name and page represents the page path. You can use wildcards () to specify multiple pages. For example, "pages/" means that all pages comply with this rule.

2. path: used to specify the homepage path of the mini program.

3. items: used to specify other page paths, titles, parameters and other information of the mini program.

4. recursion: used to specify whether to search subpages recursively, the default is false.

The above are some common configuration options for the sitemap.json file. For specific configuration methods, please refer to the WeChat applet documentation.

By configuring the sitemap.json file, WeChat search can better display the content of the mini program and increase the exposure and traffic of the mini program.

In the WeChat applet, each page needs to correspond to a .json configuration file, which is used to specify some configuration options and data for the page.

Here are some common.json configuration options:

1. usingComponents: used to reference the custom components required for this page. You can use a relative path or an absolute path to specify the location of the component. For example: "usingComponents":{"my-component":"/components/my-component/my-component}" means referencing a file named "my-component" -component's custom component.

2. navigationBarTitleText: used to specify the navigation bar title text.

3. navigationBarBackgroundColor: used to specify the background color of the navigation bar.

4. backgroundTextStyle: used to specify the style of the drop-down animation, including dark (black) and light (white).

5. backgroundColor: used to specify the page background color.

6. enablePullDownRefresh: used to specify whether to enable the pull-down refresh function, the default value is false.

7. disableScroll: used to specify whether to disable page scrolling, the default value is false.

The above are some common.json configuration options. For specific configuration methods, please refer to the WeChat applet documentation.

Okay, here is a specific example. Suppose there is a home page named "index", then its corresponding.json configuration file may be as follows:

{
    
    
  "navigationBarTitleText": "首页", 
  "navigationBarBackgroundColor": "#ffffff", 
  "usingComponents": {
    
    
    "my-component": "/components/my-component/my-component"
  },
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "disableScroll": false
}

In the above example, the .json configuration file specifies the following properties and configuration options:

1. navigationBarTitleText: The title text of the navigation bar is "Home";
2. navigationBarBackgroundColor: The background color of the navigation bar is white(#ffffff);
3. usingComponents: refers to a custom component named my-component, which is located under the /components/my-component/my-component path;
4. enablePullDownRefresh: Enable pull-down refresh function;
5. backgroundTextStyle: The drop-down animation style is dark (black);
6. disableScroll: Page scrolling is not disabled by default.

This is a simple example. In fact, .json files can also contain many other configuration options. For specific configuration methods, please refer to the WeChat applet documentation.

To modify the project homepage in the JSON configuration file, you usually need to find the corresponding configuration items and modify them. The exact steps depend on the project and framework you use. Here is an example showing how to modify the project home page in a JSON configuration file:

Assume that your project uses the Vue.js framework and uses Vue Router for routing management. You can follow the steps below to modify the project homepage:

Open the router.json file or similar routing configuration file in the project.
Find the routes array in the JSON file. This array defines all routes of the project.
Find the home page route you want to modify, usually its path is /.
Modify the component attribute of the route and point it to your new homepage component. For example, modify the original Home component into the NewHome component.
json
{ “routes”: [ { “path”: “/”, “component”: “NewHome” }, // Other routes... ] } Save the file and restart the project. Your project homepage should now be New component content will be displayed. Please note that the above steps are just an example and the specific actions will depend on the project and framework you use. Be sure to refer to your project and framework documentation for more precise instructions on how to make changes.

WXML (WeiXin Markup Language)

WXML (WeiXin Markup Language) is a set of tag languages ​​that, combined with basic components and event systems, can build the structure of the page. It is similar to HTML in web development. In the WXML file, developers can define specific events on components ("tags" are called "components" in WeChat mini programs). When an event is triggered, the WeChat applet will execute the corresponding event processing function in the logic layer to complete the communication between the page and the user.

In addition to tags and events, WXML also provides some special attributes, such as wx:if, wx:else, wx:elif, Used for conditional rendering; wx:for for list rendering; wx:key can specify the unique identifier of the item in the list, so that the specified item can be re-rendered when the data changes. project, rather than a full update.

The main difference between WXML and HTML is that WXML has custom components and native components of WeChat mini programs, such as <view>, <text>, <button> etc. These are unique to WeChat mini programs. In addition, WXML's event processing is also different from HTML. It uses bindtap, bindinput and other methods to bind events instead of HTML's onclick, oninput and other methods.

In general, WXML is a markup language designed specifically for WeChat mini programs. It helps developers define the user interface and interaction methods of WeChat mini programs.

WXSS styles

WXSS (WeiXin Style Sheets) is a style language used to describe WXML component styles, which is used to determine how WXML components should be displayed.

WXSS has most of the features of CSS. However, WXSS adds a new size unit rpx. Developers can avoid the trouble of conversion and just let the bottom layer of the mini program do the conversion. Additionally, WXSS only supports some CSS selectors.

In WXSS, you can choose to use global styles or local styles. Global styles will apply to all pages of the current applet, while local page styles will only take effect on the current page.

In general, WXSS is a style language designed specifically for WeChat mini programs. It helps developers define and control the user interface style of WeChat mini programs.

The main differences between WXSS and CSS are as follows:

1. New size unit rpx: WXSS adds a new size unit rpx based on CSS, which can automatically convert according to the screen width, allowing developers to No need to perform complicated conversion operations.
2. Selector limitations: WXSS only supports some CSS selectors. For example, it does not support pseudo-class and pseudo-element selectors.
3. Style import: WXSS does not support using the @import statement to import other style files, but you can use @import to import the custom style library of the WeChat applet.
4. Style isolation: WXSS supports local styles, which means that styles defined on one page will only affect the current page and will not affect other pages.
5. Style priority: In WXSS, style priority follows the priority rules of CSS, but adds the style priority rules of mini program custom components.

In general, WXSS is a style language specially designed for WeChat mini programs. It has most of the features of CSS, but there are also some limitations and new features to adapt to the special needs of WeChat mini programs. Developers should understand its characteristics and limitations when using WXSS to better control the interface style of WeChat mini programs.

js logical interaction

In WeChat mini programs, JavaScript (JS) is mainly responsible for processing logical operations such as user interaction, data management, and page jumps. The following are some of the main functions of JS in WeChat mini programs:

1. Page registration: Each mini program page needs to be registered in the JS file, including the page's initial data, life cycle functions, event processing functions, etc.
2. Data binding: JS can perform data binding through the data in the WXML template to dynamically render page content.
3. Event processing: JS can monitor and process user interaction events, such as clicking buttons, sliding pages, etc., and implement corresponding logical operations through event processing functions.
4. Network request: JS can use the network request API provided by WeChat applet to send requests to the backend and obtain data to achieve front-end and back-end interaction.
5. Local storage: JS can use the local storage API provided by WeChat applet to store data locally and achieve data persistence.
6. Page jump: JS can use the page jump API provided by WeChat applet to realize jumps and parameter transfer between pages.
7. Location information acquisition: JS can use the location information acquisition API provided by the WeChat applet to obtain the user's location information and implement location-based services.
8. Device information acquisition: JS can use the device information acquisition API provided by the WeChat applet to obtain the user's device information, such as model, operating system, etc., to achieve personalized recommendations and other services .

In general, JS plays a very important role in WeChat mini programs. It is responsible for handling logical operations such as user interaction, data management, and page jumps, allowing mini programs to implement complex functions and services. Developers need to be proficient in JS language and its application in WeChat mini programs in order to develop high-quality mini program applications.

Mini program hosting environment

The hosting environment of the mini program is the WeChat application. A WeChat applet is a small program embedded in a WeChat application, so its host environment is the WeChat application itself.

With the help of the capabilities provided by the host environment WeChat, WeChat mini programs can complete functions that ordinary web pages cannot complete, such as WeChat payment, WeChat code scanning, WeChat login, and geolocation. Regardless of whether the mobile phone system is Android or iOS, the hosting environment of the WeChat applet is WeChat (WeChat for Android and WeChat for iOS).

The mini program hosting environment includes four aspects: communication model, operating mechanism, components and API. Among them, the main body of communication is the rendering layer and logic layer in the mini program. The communication between them and the communication between the logic layer and the third-party server are forwarded by the WeChat client.

In addition, the mini program hosting environment also provides various APIs and components for developers to use. Through these APIs and components, developers can easily implement various functions, such as obtaining user information, payment, positioning, etc. At the same time, the mini program hosting environment also provides a complete set of operating mechanisms, including mini program startup, page rendering and other processes, to ensure the normal operation of the mini program.

In short, the host environment of the mini program is the WeChat application, which provides various functions and APIs for the mini program, allowing the mini program to implement complex functions and services. Developers need to understand and be proficient in the relevant knowledge and technologies of the mini program hosting environment in order to develop high-quality mini program applications.

https://www.bilibili.com/video/BV1WA411N75W/?spm_id_from=333.337.search-card.all.click&vd_source=3ef6540f8473c7367625a53b7b77fd66

Advantages of mini program: 1. No installation required, easy to use; 2. Relying on traffic platform, high open rate, easy to search, easy to discover, easy to share; 3. Low development cost .

How to open:

1. Native development - directly download the official developer tools and refer to the official documents, video tutorials and syntax.
Advantages: It is relatively easy to get started, the development syntax and API can be found in the documentation; problems are easier to locate and solve.
Disadvantages: large amount of code, few components, inflexible syntax, low development efficiency, and different mini program platforms have different syntaxes.

2. Framework development - various interface libraries and frameworks.
Advantages: Use less code or even directly use ready-made code. It adopts front-end programming syntax and framework, which improves development efficiency and code maintainability, making the code more concise.
Interface libraries such as Tencent’s weui and Youzan’s vantUI. Simply follow the documentation to learn, import files, select the components you need, and move the code.
Frameworks such as Tencent's wepy, uniapp, and Meituan mpvue can use syntax similar to the front-end vue development framework.
Students who are familiar with react can try Alibaba’s remax and JD.com’s taro.
Disadvantages: The cost of troubleshooting is high; when the framework has bugs or unsupported functions, it is very passive.

3. Cross-terminal development (the most mainstream)—publish a small program simultaneously on multiple platforms. The cross-end development framework allows you to write a set of codes to automatically generate small programs and h5 pages that support multiple platforms. For example, uniapp (simple syntax, rich component libraries and plug-ins, good ecology, loved by novices and vue developers), remax, taro (loved by react developers) and chameleon are all supported, and some also support conditional editing (writing special programs for different platforms) logic).

4. Low-code development - a visual page platform that changes the style and behavior of components by dragging components and entering configurations, and then automatically generates code. Such as Tencent’s WeDa.
Advantages: Almost no code, not even cv.

5. Cloud development

Advantages: You can use the database and functions to operate the database without building the backend yourself. Even if you only know the front-end, you can develop a complete small program.
The applet is also a front-end, and it is also the business logic for developing interfaces, interactions, and some data requests, but the syntax is slightly different. For example, the WeChat applet has a basic syntax similar to the front-end three-piece set of HTML+JS+CSS. So finally learn the basics of front-end web development.
It is best to learn a front-end framework first, such as vue or react. Newbies should first lay a foundation in native development and understand the mechanism of mini programs

Personally suggested learning route
1-The three major front-end items must be in the early stage.
2-Learn some nodejs, mainly to learn vue later. You need to install the scaffolding vue-cli in the node environment.
3-Study vue seriously and be familiar with the basic vuex, router, and axios in vue.
4-It is best to learn small programs again, you will find out. The overall idea of ​​the mini program is similar to vue. Then follow the official documentation and get started.