小程序模板網(wǎng)

[Wondgirl] 入門系列教程《一》上手簡介

發(fā)布時(shí)間:2018-03-30 16:05 所屬欄目:小程序開發(fā)教程

什么是微信小程序:

小程序是一種新的開放能力,開發(fā)者可以快速地開發(fā)一個(gè)小程序。小程序可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn)。

微信小程序官網(wǎng)(微信公眾平臺(tái)): https://mp.weixin.qq.com/ 
微信小程序開發(fā)文檔 
微信開發(fā)者工具下載地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122

微信開發(fā)者工具的使用

1.安裝好微信開發(fā)者工具后,點(diǎn)擊打開. 

2.用手機(jī)的微信掃一掃掃碼登陸. 
這里寫圖片描述

3.選擇本地項(xiàng)目: 

4.添加項(xiàng)目 

5.添寫項(xiàng)目名稱,選擇存放目錄 

6.進(jìn)到主屆面,我們可以添加修改刪除自己目錄或文件. 

每個(gè)文件更改后都要按command+s保存再進(jìn)行編譯. 
調(diào)試—Console:打印log 
調(diào)試—Sources:源碼 
調(diào)試—Network:網(wǎng)絡(luò) 
調(diào)試—Storage:緩存(本地?cái)?shù)據(jù)庫) 可以點(diǎn)擊左邊欄的緩存按鈕清除緩存. 
調(diào)試—AppData:程序的數(shù)據(jù). 
左邊欄后臺(tái)按鈕,模擬小程序在后臺(tái)運(yùn)行.

導(dǎo)入已有項(xiàng)目

項(xiàng)目目錄選擇你要導(dǎo)入的項(xiàng)目即可.項(xiàng)目名稱可以寫成和要導(dǎo)入項(xiàng)目的名稱一樣.也可以不一樣. 

目錄結(jié)構(gòu)

編輯—app.json 
pages數(shù)組里面是頁面的路徑,對應(yīng)的是pages里面的文件夾,一個(gè)文件夾是一個(gè)頁面. 
每個(gè)頁面必須包含一個(gè) .js 文件 和一個(gè) .wxml文件. 
.js文件配制頁面的入口. 
.wxml文件配制布局與UI 
.json是頁面的配置文件 
.wxss是頁面的樣式文件


  1. {
  2. "pages":[//頁面:是個(gè)數(shù)組(這里對應(yīng)的兩個(gè)頁面.
  3. "pages/index/index",//index頁面的路徑
  4. "pages/logs/logs"//logs頁面的路徑
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "WeChat",
  10. "navigationBarTextStyle":"black"
  11. }
  12. }

創(chuàng)建一個(gè)空的項(xiàng)目

不要勾選下方的復(fù)選框. 

一.新建App.json文件 

二.新建src源碼目錄.  1.在src目錄下新建頁面pages目錄  2.在pages目錄下新建index目錄.  3.在index目錄下新建頁面index.js和index.wxml  三.新建app.js文件 

四.我們在頁面的布局.wxml文件中輸入要顯示的內(nèi)容 

五.在頁面入口index.js中輸入(頁面的配制)


  1. Page({
  2. data:{
  3.  
  4. },
  5. onLoad:function(options){
  6. // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  7.  
  8. },
  9. onReady:function(){
  10. // 頁面渲染完成
  11.  
  12. },
  13. onShow:function(){
  14. // 頁面顯示
  15.  
  16. },
  17. onHide:function(){
  18. // 頁面隱藏
  19.  
  20. },
  21. onUnload:function(){
  22. // 頁面關(guān)閉
  23.  
  24. }
  25. })

在程序入口app.js中輸入


  1. App({
  2. onLaunch: function () {
  3. console.log('App Launch')
  4. },
  5. onShow: function () {
  6. console.log('App Show')
  7. },
  8. onHide: function () {
  9. console.log('App Hide')
  10. }
  11. })

在app.json中輸入(程序的配制)


  1. {
  2. "pages": [
  3. "src/pages/index/index"
  4. ]
  5. }


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/22986.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢