小編給大家分享一下小程序開發(fā)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)主要為客戶提供服務項目涵蓋了網(wǎng)頁視覺設計、VI標志設計、網(wǎng)絡營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應式網(wǎng)站建設、成都手機網(wǎng)站制作、微商城、網(wǎng)站托管及網(wǎng)站建設維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務器租用、視頻、平面設計、SEO優(yōu)化排名。設計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經(jīng)為混凝土攪拌站行業(yè)客戶提供了網(wǎng)站開發(fā)服務。所以本文非常適合非前端工程師學習!哈哈!都說小程序出來前端會搶移動端飯碗,但是據(jù)我所知現(xiàn)在好多學習的都是移動開發(fā)工程師,誰搶誰的還不一定呢!
PS:表問我怎么拿到小程序內(nèi)測資格的,有種東西叫內(nèi)部資源!
準備工作
IDE搭建
知識準備
從零開始
app.js
app.json
app.wxml
app.wxss
Hello World
創(chuàng)建程序實例
美化ActionBar
美化頁面
配置首頁
超級Hello World
事件綁定函數(shù)
更新界面數(shù)據(jù)
就不多說了,沒有內(nèi)測碼去下載個破解版吧,我用了一下,學習完全夠了!IDE破解版+安裝教程
JavaScrip還是要看看的,推薦教程 廖雪峰大神的博客
HTML+CSS 大概知道是干啥的就行
js ---------- JavaScrip文件
json -------- 項目配置文件,負責窗口顏色等等
wxml ------- 類似HTML文件
wxss ------- 類似CSS文件
在根目錄下用app來命名的這四中類型的文件,就是程序入口文件。
必須要有這個文件,如果沒有這個文件,IDE會報錯,因為微信框架把這個作為配置文件入口,
你只需創(chuàng)建這個文件,里面寫個大括號就行
以后我們會在這里對整個小程序的全局配置。記錄了頁面組成,配置小程序的窗口 背景色,配置導航條樣式,配置默認標題。
必須要有這個文件,沒有也是會報錯!但是這個文件創(chuàng)建一下就行 什么都不需要寫
以后我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。
這個文件不是必須的。因為它只是個全局CSS樣式文件
這個也不是必須的,而且這個并不是指主界面哦~因為小程序的主頁面是靠在JSON文件中配置來決定的
有了這兩個文件你運行程序,IDE就不會報錯了,也意味著這是最簡單的微信小程序
Paste_Image.png
app.js文件管理整個程序的生命周期,所以在里面添加如下代碼:(輸入App IDE會有提示)
App({ onLaunch: function () { console.log('App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') } })
具體API解釋如下
美化ActionBar
json文件負責配置ActionBar顏色,我們只需要在里面添加如下代碼即可,下圖有參數(shù)說明!
{ "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle":"white" } }
現(xiàn)在看ActionBar是不是像那么回事了!好接下來我們繼續(xù)寫我們第一個界面
美化頁面我們用到了 wxml 和 wxss文件
為了程序代碼結構簡潔
我們需要在跟目錄下創(chuàng)建一個新文件夾 名字隨意,我們這里叫pages
然后在pages文件夾里再創(chuàng)建新文件夾 名字隨意 這里我們叫 index
然后我們創(chuàng)建index.wxml文件然后在里面寫入以下代碼
<view> <text class="window">Hello</text> </view>
然后創(chuàng)建index.wxss文件然后在里面寫入以下代碼
.window{ color=#4995fa; }
然后我們創(chuàng)建 index.js文件
在文件中輸入如下代碼(輸入Page IDE會有提示)
Page({ data:{ // text:"這是一個頁面" }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的參數(shù) }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關閉 } })
函數(shù)解釋如下:
Json文件負責配置頁面路徑
所以我們在里面加入如下代碼
其中index的含義 其實就是指index.js文件
這里需要說明一點 pages 里面的路徑其實是指向js文件的
如果一個目錄下沒有該名稱的js文件是會報錯的!
"pages":[ "pages/index/index" ],
完成了!我們來運行程序!
為了學習事件綁定,以及如何將數(shù)據(jù)在頁面上更新
我們來做個超級Hello World,就是我點擊文字,能讓
它變色!
我們打開index.wxml 將里面代碼改成這樣
<view> <text catchtap="click" class="window">Hello</text> </view>
其實也就是加了
catchtap="click"
這兩個屬性是什么意思呢 別著急 我會一一解釋
上圖展示了事件的一些的屬性名稱,這里需要注意紅框標注起來的內(nèi)容,區(qū)分出冒泡事件和非冒泡事件,其實冒泡事件就是需要往上面一層容器傳遞這個事件。
看了這圖 我們再來看 catchtap="click" 的含義
catch 代表非冒泡事件
tap 代表點擊事件
所以連在一起就是非冒泡點擊事件
那后面那個click是啥
click 其實只是個變量名字
我們在index.js需要用這個名字綁定接收事件的函數(shù)
我們打開index.js
然后添加如下函數(shù)
click:function(){ console.log("點擊了文字"); },
添加完后代碼長這樣 紅框中就是 添加的這個代碼
所以其實點擊事件的回調(diào)函數(shù) 就是 catchtap="click"
中的 click 后面加上 :function() 構成的
現(xiàn)在我們來運行程序試試 然后點擊文字
看是不是調(diào)用了 click:function 函數(shù) 并且打出了log
好接下來我們寫點擊一下變色的邏輯
那如何讓一個文字變色呢,當然是css
所以我們需要再index.wxss 中添加一個樣式
.window-red{ color:#D23933; }
然后我們進入index.js文件
你會發(fā)現(xiàn)代碼里面有個 data:{} 它不是page生命周期函數(shù)
其實他是個變量的數(shù)組,這個里面申請的變量都可以在 wxml中使用
我們在這里申請一個color
color的值就是index.wxss中的樣式名稱
然后進入index.wxml中,將class中的值改成 {{color}}
其實意思就是 將js文件中變量 color的值在這里使用
也就是值等于 window
然后我們再回到index.js文件
在最上面申請一個變量控制點擊
然后在click:function() 函數(shù)中添加如下代碼
click:function(){ console.log("點擊了文字"); if(flag){ color = "window-red"; flag = false; }else{ color = "window"; flag = true; } this.setData({ color }); },
修改完后的代碼如圖
其實就是在點擊是后 更換color變量的值 而更換的這個值其實就是樣式的名稱
這里有個問題 我們更換完值 但是在wxml中不會立即生效
所以我們需要調(diào)用
this.setData()方法將值同步給wxml 讓它立即生效
好了我們運行程序 點擊Hello 看看是不是點一下 變一下顏色!
最后再補充一點 index目錄下也是可以配置 json文件的
也就是每個頁面都可以配置自己獨特的actionbar顏色等等
以上是“小程序開發(fā)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章題目:小程序開發(fā)的示例分析-創(chuàng)新互聯(lián)
本文鏈接:http://muchs.cn/article44/egshe.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、網(wǎng)站改版、服務器托管、網(wǎng)站收錄、動態(tài)網(wǎng)站、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容