Table of Contents
1. Add a directory to pages
2. Create a new wxml file
3. Edit the test.wxml file
4. In the same way, create the test.js file, Edit the test.js file
5. Add the test page to app.json
6. Add a jump access link on the homepage
7. Test
8: Set the page title
Home WeChat Applet Mini Program Development Introduction to the steps to create a mini program page in the WeChat mini program (pictures and text)

Introduction to the steps to create a mini program page in the WeChat mini program (pictures and text)

Aug 16, 2018 pm 03:42 PM

This article brings you an introduction to the steps of creating a WeChat mini program page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Create a simple page and the specific steps to create a mini program page:

1. Add a directory to pages

Select page, right-click the mouse, and select Open the hard disk. After opening the hard disk file, create a new folder test (or click the icon to add directories one by one and add the files required under the directory)

Or add it like this

2. Create a new wxml file

Create a new empty wxml file under the test folder

3. Edit the test.wxml file

In order to facilitate testing, we can fill in some content

<view class="container">  
    <text>这是我的test页面哦哦!!!</text>  
</view>
Copy after login

4. In the same way, create the test.js file, Edit the test.js file

Create a new empty js file under the test folder
Use the same method as above to create a test.js file in the test directory. In order to facilitate testing, we can fill in some content ( You can also leave it blank or leave the file blank)

//test.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    userInfo: {}  
  },  
  onLoad: function () {  
    console.log(&#39;onLoad test&#39;);  
  }  
})
Copy after login

5. Add the test page to app.json

Open the global file app.json and add "pages/test/test" in the file "(Add a directory where the test page is located)

Everything is ready, everything that needs to be added has been added , the following is the moment to witness the miracle. Write a page entry on the homepage, jump to the page we want to test, and directly add a piece of code and a link to pages/index/index.wxml on the homepage

<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
 </view>
Copy after login

7. Test

Save the code, click the compile button above, all the codes will run, click "Jump to test page" on the homepage, the jump will be successful, as shown below.

8: Set the page title

Setting the page title is a very simple step. Find the directory of the page and create a new json file (generally They are all automatically generated, if not, create a new one), such as the test page we built last time, find the pages/test/ directory, create a new test.json file and add the following code.

{
  "navigationBarTitleText": "详情页"
}
Copy after login

The effect is as follows:

OK, now, the creation of the page and the jump between pages are completed

Related recommendations:

WeChat Mini Program Development - Create a Welcome Page

WeChat Mini Program - Custom Creation

Detailed Explanation of WeChat Mini Program Case: Page Construction

The above is the detailed content of Introduction to the steps to create a mini program page in the WeChat mini program (pictures and text). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1652
14
PHP Tutorial
1251
29
C# Tutorial
1224
24