色婷婷五月综合久久中文_亚洲性爱毛片免费看_21国产精品喷潮白浆_国产精品无码亚洲精品2022_久久久亚洲国产精品性色

Menu
小程序資訊
小程序資訊
微信小程序簡易全攻略《一》開始構(gòu)建與創(chuàng)建頁面
時間:2016-10-20 14:23:00

一:開始構(gòu)建

最近微信小程序開始火起來了,雖然還沒開放公測,但是開發(fā)工具,本地環(huán)境卻是可以構(gòu)建了

廢話不多說,直接進(jìn)入正題;


1. 首先下載工具

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN

點擊上面的鏈接 找到小程序開發(fā)者工具 點擊


下載 對應(yīng)版本,傻瓜式的安裝不必細(xì)述


2. 構(gòu)建小程序

安裝完成后  雙擊 打開應(yīng)用  


打開微信并掃描 確認(rèn)登錄即可

點擊添加項目

選擇 無 AppID  -->  填寫項目名稱 -->  選擇項目目錄(沒有的話可以先創(chuàng)建一個空文件夾) --> 點擊 添加項目


歐了  簡單的 hello world 就創(chuàng)建好了


二:創(chuàng)建頁面

好了 hello world 創(chuàng)建好了 ,咱開始寫頁面了,那么如何創(chuàng)建一個簡單的頁面呢,

廢話不多說,開始擼代碼


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


1. 在pages 中添加一個目錄

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

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

2. 新建一個wxml 文件

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

3. 編輯test.wxml 文件

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

[html] view plain copy
  1. <view class="container">  
  2.     <text>這是我的test頁面哦哦!?。?/span></text>  
  3. </view>  


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

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

[javascript] view plain copy
  1. //test.js  
  2. //獲取應(yīng)用實例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.     userInfo: {}  
  7.   },  
  8.   onLoad: function () {  
  9.     console.log('onLoad test');  
  10.   }  
  11. })  



5. 將test 頁面加入 app.json

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

6. 在首頁加入訪問鏈接

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

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

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


7. 訪問

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


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


哇哈哈,看到了沒,你的頁面做好了?。。。ㄗ⒁馑许撁婢庉嫼?請按 ctrl + s 保存鍵)

咨詢
微信掃碼咨詢
電話咨詢
400-888-9358