微信小程序二（創(chuàng)建頁(yè)面）

2018-03-12 15:48:21 csdn　點(diǎn)擊量：評(píng)論 (0)

好了 hello world 創(chuàng)建好了，咱開始寫頁(yè)面了，那么如何創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面呢，廢話不多說(shuō)，開始擼代碼新建一個(gè)頁(yè)面需要以下幾步，1

好了 hello world 創(chuàng)建好了，咱開始寫頁(yè)面了，那么如何創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面呢，

廢話不多說(shuō)，開始擼代碼

新建一個(gè)頁(yè)面需要以下幾步，

1. 在pages 中添加一個(gè)目錄

（當(dāng)然如果你覺得寫在現(xiàn)有的目錄里面就好那這一步就省略啦）

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

2. 新建一個(gè)wxml 文件

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

3. 編輯test.wxml 文件

為了方便測(cè)試我們隨便填寫點(diǎn)內(nèi)容進(jìn)去

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

4. 創(chuàng)建test.js文件

使用同樣的方法在test 目錄下創(chuàng)建一個(gè) test.js 文件

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

5. 將test 頁(yè)面加入 app.json

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

6. 在首頁(yè)加入訪問(wèn)鏈接

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

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

[html] view plain copy 
<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">跳轉(zhuǎn)test頁(yè)面</navigator>  
 </view>  

7. 訪問(wèn)

一且準(zhǔn)備就緒，點(diǎn)擊左下角的 “編譯”，出現(xiàn)如下頁(yè)面

然后點(diǎn)擊 “”跳轉(zhuǎn)test頁(yè)面“”

哇哈哈，看到了沒，你的頁(yè)面做好了！！！（注意所有頁(yè)面編輯后請(qǐng)按 ctrl + s 保存鍵）

不要走開，下節(jié)更精彩！

責(zé)任編輯：售電衡衡

免責(zé)聲明：本文僅代表作者個(gè)人觀點(diǎn)，與本站無(wú)關(guān)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，請(qǐng)讀者僅作參考，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。

我要收藏

個(gè)贊