Developing WeChat mini programs from scratch (2)-Mini Program Development-php.cn

Developing WeChat mini programs from scratch (2)

小云云

Release： 2018-03-21 09:42:57

Original

2522 people have browsed it

In the previous chapter, we shared with you how to develop a WeChat applet from scratch (1). After registering the applet and adding a new project, the general preparation and development has been completed. What we want to share in this chapter is to create a simple page. , specific steps to create a mini program page:

1. Add a directory in pages

Select page, right-click the mouse, open from the hard disk, open the hard disk file, and create a new file Fold test (or click the + sign to add directories one by one and add the required files under the directories)

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

For the convenience of testing, let’s just fill in some content

<view class="container">  
    <text>这是我的test页面哦哦！！！</text>  </view>

Copy after login

4. The same method, Create the test.js file and 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 our testing Just fill in some content (you can also leave it blank, or just 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 it in the file "pages/test/test" (add a directory where the test page is located)

6. Add a jump access link on the homepage

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

<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 codes After running it, click "Jump to test page" on the homepage, and the jump is successful, as shown below.

8: Set the page title

Setting the page title is a very simple step. Find the page you are on. directory, create a new json file (usually 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, here, create the page and completing the jump between pages

Related recommendations:

Developing WeChat mini programs from scratch (1)

A brief introduction to WeChat mini programs

WeChat applet global configuration development example

The above is the detailed content of Developing WeChat mini programs from scratch (2). For more information, please follow other related articles on the PHP Chinese website!