推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 945|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序開發教程

  [復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 17:13:10 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
從零開始小程序今天一不小心拿到了小程序的內測資格,為了不辜負微信團隊的信任,我決定十一奮斗一把!不過話說我可是一個Android工程師啊!所以就讓我們從零開始!
所以本文非常適合非前端工程師學習!哈哈!都說小程序出來前端會搶移動端飯碗,但是據我所知現在好多學習的都是移動開發工程師,誰搶誰的還不一定呢!
PS:表問我怎么拿到小程序內測資格的,有種東西叫內部資源!
  • 準備工作
    • IDE搭建
    • 知識準備
  • 從零開始
    • app.js
    • app.json
    • app.wxml
    • app.wxss
  • Hello World
    • 創建程序實例
    • 美化ActionBar
    • 美化頁面
    • 配置首頁
  • 超級Hello World
    • 事件綁定函數
    • 更新界面數據

準備工作IDE搭建就不多說了,沒有內測碼去下載個破解版吧,我用了一下,學習完全夠了!IDE破解版+安裝教程




圖片發自簡書App



知識準備JavaScrip還是要看看的,推薦教程 廖雪峰大神的博客
HTML+CSS 大概知道是干啥的就行

從零開始微信小程序中就四種類型的文件
  • js  ----------  JavaScrip文件
  • json -------- 項目配置文件,負責窗口顏色等等
  • wxml -------  類似HTML文件
  • wxss -------  類似CSS文件
在根目錄下用app來命名的這四中類型的文件,就是程序入口文件。
app.json必須要有這個文件,如果沒有這個文件,IDE會報錯,因為微信框架把這個作為配置文件入口,
你只需創建這個文件,里面寫個大括號就行
以后我們會在這里對整個小程序的全局配置。記錄了頁面組成,配置小程序的窗口  背景色,配置導航條樣式,配置默認標題。
app.js必須要有這個文件,沒有也是會報錯!但是這個文件創建一下就行 什么都不需要寫
以后我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。
app.wxss這個文件不是必須的。因為它只是個全局CSS樣式文件
app.wxml這個也不是必須的,而且這個并不是指主界面哦~因為小程序的主頁面是靠在JSON文件中配置來決定的
有了這兩個文件你運行程序,IDE就不會報錯了,也意味著這是最簡單的微信小程序



Paste_Image.png


Hello World創建程序實例app.js文件管理整個程序的生命周期,所以在里面添加如下代碼:(輸入App IDE會有提示)
App({  onLaunch: function () {    console.log('App Launch')  },  onShow: function () {    console.log('App Show')  },  onHide: function () {    console.log('App Hide')  }})具體API解釋如下




Paste_Image.png

美化ActionBarjson文件負責配置ActionBar顏色,我們只需要在里面添加如下代碼即可,下圖有參數說明!



Paste_Image.png




Paste_Image.png

{    "window":{        "navigationBarBackgroundColor": "#BBDEF8",        "navigationBarTitleText": "Demo",        "navigationBarTextStyle":"white"    }}


Paste_Image.png

現在看ActionBar是不是像那么回事了!好接下來我們繼續寫我們第一個界面
美化頁面美化頁面我們用到了 wxml 和 wxss文件
為了程序代碼結構簡潔
我們需要在跟目錄下創建一個新文件夾 名字隨意,我們這里叫pages
然后在pages文件夾里再創建新文件夾 名字隨意 這里我們叫 index
然后我們創建index.wxml文件然后在里面寫入以下代碼
<view>    <text class="window">Hello</text></view>然后創建index.wxss文件然后在里面寫入以下代碼
.window{  color=#4995fa;}然后我們創建 index.js文件
在文件中輸入如下代碼(輸入Page IDE會有提示)
Page({  data:{    // text:"這是一個頁面"  },  onLoad:function(options){    // 頁面初始化 options為頁面跳轉所帶來的參數  },  onReady:function(){    // 頁面渲染完成  },  onShow:function(){    // 頁面顯示  },  onHide:function(){    // 頁面隱藏  },  onUnload:function(){    // 頁面關閉  }})函數解釋如下:



Paste_Image.png

配置首頁Json文件負責配置頁面路徑
所以我們在里面加入如下代碼
其中index的含義 其實就是指index.js文件
這里需要說明一點 pages 里面的路徑其實是指向js文件的
如果一個目錄下沒有該名稱的js文件是會報錯的!
"pages":[  "pages/index/index"],完成了!我們來運行程序!



Paste_Image.png


超級Hello World為了學習事件綁定,以及如何將數據在頁面上更新
我們來做個超級Hello World,就是我點擊文字,能讓
它變色!
綁定事件我們打開index.wxml 將里面代碼改成這樣
<view>    <text catchtap="click" class="window">Hello</text></view>其實也就是加了
  • catchtap="click"
這兩個屬性是什么意思呢 別著急 我會一一解釋



Paste_Image.png

上圖展示了事件的一些的屬性名稱,這里需要注意紅框標注起來的內容,區分出冒泡事件和非冒泡事件,其實冒泡事件就是需要往上面一層容器傳遞這個事件。
看了這圖 我們再來看 catchtap="click" 的含義
catch 代表非冒泡事件
tap 代表點擊事件
所以連在一起就是非冒泡點擊事件
那后面那個click是啥
click 其實只是個變量名字
我們在index.js需要用這個名字綁定接收事件的函數
我們打開index.js
然后添加如下函數
  click:function(){    console.log("點擊了文字");  },添加完后代碼長這樣 紅框中就是 添加的這個代碼



Paste_Image.png

所以其實點擊事件的回調函數 就是 catchtap="click"
中的 click 后面加上 :function() 構成的
現在我們來運行程序試試 然后點擊文字



Paste_Image.png


看是不是調用了 click:function 函數 并且打出了log
好接下來我們寫點擊一下變色的邏輯
那如何讓一個文字變色呢,當然是css
所以我們需要再index.wxss 中添加一個樣式
.window-red{    color:#D23933;}


Paste_Image.png

然后我們進入index.js文件
你會發現代碼里面有個 data:{} 它不是page生命周期函數
其實他是個變量的數組,這個里面申請的變量都可以在 wxml中使用



Paste_Image.png

我們在這里申請一個color



Paste_Image.png

color的值就是index.wxss中的樣式名稱
然后進入index.wxml中,將class中的值改成 {{color}}



Paste_Image.png

其實意思就是 將js文件中變量 color的值在這里使用
也就是值等于 window
然后我們再回到index.js文件
在最上面申請一個變量控制點擊
然后在click:function() 函數中添加如下代碼
click:function(){    console.log("點擊了文字");      if(flag){        color = "window-red";        flag = false;      }else{        color = "window";        flag = true;      }      this.setData({        color      });  },修改完后的代碼如圖



Paste_Image.png

其實就是在點擊是后 更換color變量的值 而更換的這個值其實就是樣式的名稱
更新界面數據這里有個問題 我們更換完值 但是在wxml中不會立即生效
所以我們需要調用
this.setData()方法將值同步給wxml 讓它立即生效
好了我們運行程序 點擊Hello 看看是不是點一下 變一下顏色!



111111.gif


最后再補充一點 index目錄下也是可以配置 json文件的
也就是每個頁面都可以配置自己獨特的actionbar顏色等等
這里的配置會覆蓋 app.json文件的配置
最后附上github 地址 https://github.com/pwh0996/WXDemo.git
最后由于著急睡覺 ,所以錯別字比較多,后面整理望大家見諒
喜歡的話歡迎打賞~!!!我會繼續寫下去的



作者:蒲文輝
鏈接:https://www.jianshu.com/p/aaef5ceb3936
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 浙江6+1 2019欧冠积分榜 幸运赛车号码走势 追光娱乐棋牌app 宁夏十一选五前三走势图 体彩排列五走势图 贵州十一选五 win007球探比分官网 北京11选五走势图走势 捕鱼来了弹头怎么换钱 极速赛车预测 每天送救济金棋牌下 …?