大云網新技術電力軟件正文

微信小程序二（創建頁面）

2018-03-12 15:48:21 csdn　點擊量：評論 (0)

好了 hello world 創建好了，咱開始寫頁面了，那么如何創建一個簡單的頁面呢，廢話不多說，開始擼代碼新建一個頁面需要以下幾步，1

好了 hello world 創建好了，咱開始寫頁面了，那么如何創建一個簡單的頁面呢，

廢話不多說，開始擼代碼

新建一個頁面需要以下幾步，

1. 在pages 中添加一個目錄

（當然如果你覺得寫在現有的目錄里面就好那這一步就省略啦）

點擊左側的編輯 --> 點中 pages 文件夾 --> 點擊右上角的 + 號 --> 在下拉菜單中選擇目錄 --> 彈出框中填寫目錄名稱（這里我們寫了test）--> 點擊確定

2. 新建一個wxml 文件

選中 test 文件夾 --> 點擊右上角 + 號 ---> 選擇 wxml 類型文件 --> 填入文件名（注意這里必須填寫后綴名至少我的版本是必須填入的）

3. 編輯test.wxml 文件

為了方便測試我們隨便填寫點內容進去

[html] view plain copy
<view class="container">  
    <text>這是我的test頁面哦哦！！！</text>  
</view>  

4. 創建test.js文件

使用同樣的方法在test 目錄下創建一個 test.js 文件

[javascript] view plain copy 
//test.js  
//獲取應用實例  
var app = getApp()  
Page({  
  data: {  
    userInfo: {}  
  },  
  onLoad: function () {  
    console.log('onLoad test');  
  }  
})  

5. 將test 頁面加入 app.json

在pages 屬性中加入一條 test 頁面所在的目錄這里是相對路徑首部不必填寫 /

6. 在首頁加入訪問鏈接

好了上面路徑也加好了我們得加個入口才能看到自己寫的頁面啊，小程序的首頁一般是默認顯示 pages 屬性

中的第一條路徑所指向的頁面，如果我們不想破壞原有的那么我們直接找到首頁 pages/index/index.wxml 添加一個鏈接

[html] view plain copy 
<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">跳轉test頁面</navigator>  
 </view>  