Record of WeChat Mini Program Development-Getting Started for Novices

I am trying to develop a WeChat applet for the first time, and I plan to write a blog post to record the difficulties, ideas, and content of Baidu programming in the development process in as much detail as possible for reference.

first day

Development background

Participate in development with another newly hired colleague. I am responsible for the front-end WeChat applet, and the back-end uses the lua language he is good at (normal java, springboot series or jsp-servlet series can be implemented), and data is transmitted through json in the middle.

Completed project link
https://gitee.com/lyuhuyuteru/weixin/tree/master/%E6%8E%A5%E9%BE%99%E7%AE%A1%E7%90%86%E5%B0%8F%E7%A8%8B%E5%BA%8F

Registration test number, applet number

https://mp.weixin.qq.com/
Open the official website of the WeChat public platform, find the small program and click to register to


download the development tool. The version when the author writes the article is 1.03.2010240, which

can be seen in the development managementAppID and AppSecret

After the installation is complete, open the program

and create a new project after opening . The AppID can be filled in before the registration or the test number can be used. It does not matter whether the cloud development function is used or not.

Page jump, login interception

Click to enter the newly created project, app.js (this file is a common part of the program), index (this is the home page) to

create a new loginPage login interface, right-click to create a new folder, and create a new page loginPage under the folder. Four files will be automatically generated. It is wxml, wxss, js, json to

open app.js, add code in the position of the figure, the

code is to make the page jump to the login interface when the user is not logged in

Check whether the page is declared in the app.Json page.

Homepage wxml code

Js code

Css code

Json code

Import components component Import

homepage icon

homepage code

File directory structure

│  app.js
│  app.json
│  app.wxss
│  project.config.json
│  sitemap.json
│
├─components
│  ├─cell
│  │      cell.js
│  │      cell.json
│  │      cell.wxml
│  │      cell.wxss
│  │
│  ├─cells
│  │      cells.js
│  │      cells.json
│  │      cells.wxml
│  │      cells.wxss
│  │
│  ├─icon
│  │      icon.js
│  │      icon.json
│  │      icon.wxml
│  │      icon.wxss
│  │
│  ├─import
│  │  │  base64.js
│  │  │  common.wxss
│  │  │  CustomPage.js
│  │  │
│  │  └─behaviors
│  │          theme.js
│  │
│  └─weui-wxss
│      └─dist
│          └─style
│              │  weui.wxss
│              │
│              └─icon
│                      weui-icon.wxss
│
├─images
│      icon_nav_feedback.png
│      icon_nav_form.png
│      icon_nav_special.png
│      icon_nav_z-index.png
│      jielong.jpg
│      tabbar_icon_chat_active.png
│      tabbar_icon_setting_active.png
│
├─pages
│  ├─icons
│  │      icons.js
│  │      icons.json
│  │      icons.wxml
│  │      icons.wxss
│  │
│  ├─index
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  │
│  ├─loginPage
│  │      loginPage.js
│  │      loginPage.json
│  │      loginPage.wxml
│  │      loginPage.wxss
│  │
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
└─utils
        util.js

effect

Off-topic skills

To continue the process of debugging authorization, the authorization can be canceled by setting




the debug json
can Stager nodejs json format by the json-server
to achieve the separation of the front and rear end of the program
in detail hereinafter link learning operation
https://blog.csdn.net/weixin_44612322/article/details/102960647

json example

{
    
    
	"data": [{
    
    
		"username": "ldh",
		"password": "123"
	}]
}

svg conversion to
get the svg tag code

, rename the svg suffix after

creating a new txt , open the browser and you can view the png