小編給大家分享一下小程序開發(fā)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、網(wǎng)絡(luò)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、成都手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及網(wǎng)站建設(shè)維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為混凝土攪拌站行業(yè)客戶提供了網(wǎng)站開發(fā)服務(wù)。

從零開始小程序

所以本文非常適合非前端工程師學(xué)習(xí)！哈哈！都說小程序出來前端會(huì)搶移動(dòng)端飯碗，但是據(jù)我所知現(xiàn)在好多學(xué)習(xí)的都是移動(dòng)開發(fā)工程師，誰搶誰的還不一定呢！
PS：表問我怎么拿到小程序內(nèi)測(cè)資格的，有種東西叫內(nèi)部資源！

• 準(zhǔn)備工作

• IDE搭建

• 知識(shí)準(zhǔn)備

• 從零開始

• app.js

• app.json

• app.wxml

• app.wxss

• Hello World

• 創(chuàng)建程序?qū)嵗?/p>

• 美化ActionBar

• 美化頁面

• 配置首頁

• 超級(jí)Hello World

• 事件綁定函數(shù)

• 更新界面數(shù)據(jù)

  
  

準(zhǔn)備工作

IDE搭建

就不多說了，沒有內(nèi)測(cè)碼去下載個(gè)破解版吧，我用了一下，學(xué)習(xí)完全夠了！IDE破解版+安裝教程

---

知識(shí)準(zhǔn)備

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

---

從零開始

微信小程序中就四種類型的文件

• js ---------- JavaScrip文件

• 
  

• json -------- 項(xiàng)目配置文件，負(fù)責(zé)窗口顏色等等

• 
  

• wxml ------- 類似HTML文件

• 
  

• wxss ------- 類似CSS文件

在根目錄下用app來命名的這四中類型的文件，就是程序入口文件。

app.json

必須要有這個(gè)文件，如果沒有這個(gè)文件，IDE會(huì)報(bào)錯(cuò)，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口，
你只需創(chuàng)建這個(gè)文件，里面寫個(gè)大括號(hào)就行
以后我們會(huì)在這里對(duì)整個(gè)小程序的全局配置。記錄了頁面組成，配置小程序的窗口 背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。

app.js

必須要有這個(gè)文件，沒有也是會(huì)報(bào)錯(cuò)！但是這個(gè)文件創(chuàng)建一下就行 什么都不需要寫
以后我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。

app.wxss

這個(gè)文件不是必須的。因?yàn)樗皇莻€(gè)全局CSS樣式文件

app.wxml

這個(gè)也不是必須的，而且這個(gè)并不是指主界面哦~因?yàn)樾〕绦虻闹黜撁媸强吭贘SON文件中配置來決定的

有了這兩個(gè)文件你運(yùn)行程序，IDE就不會(huì)報(bào)錯(cuò)了，也意味著這是最簡(jiǎn)單的微信小程序

Paste_Image.png

---

Hello World

創(chuàng)建程序?qū)嵗?/h3>

app.js文件管理整個(gè)程序的生命周期，所以在里面添加如下代碼：（輸入App IDE會(huì)有提示）

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

具體API解釋如下

美化ActionBar

json文件負(fù)責(zé)配置ActionBar顏色，我們只需要在里面添加如下代碼即可，下圖有參數(shù)說明！

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

現(xiàn)在看ActionBar是不是像那么回事了！好接下來我們繼續(xù)寫我們第一個(gè)界面

美化頁面

美化頁面我們用到了 wxml 和 wxss文件
為了程序代碼結(jié)構(gòu)簡(jiǎn)潔
我們需要在跟目錄下創(chuàng)建一個(gè)新文件夾 名字隨意，我們這里叫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會(huì)有提示）

Page({
  data:{
    // text:"這是一個(gè)頁面"
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關(guān)閉
  }
})

函數(shù)解釋如下：

配置首頁

Json文件負(fù)責(zé)配置頁面路徑
所以我們?cè)诶锩婕尤肴缦麓a
其中index的含義 其實(shí)就是指index.js文件
這里需要說明一點(diǎn) pages 里面的路徑其實(shí)是指向js文件的
如果一個(gè)目錄下沒有該名稱的js文件是會(huì)報(bào)錯(cuò)的！

"pages":[
  "pages/index/index"
],

完成了！我們來運(yùn)行程序！

---

超級(jí)Hello World

為了學(xué)習(xí)事件綁定，以及如何將數(shù)據(jù)在頁面上更新
我們來做個(gè)超級(jí)Hello World，就是我點(diǎn)擊文字，能讓
它變色！

綁定事件

我們打開index.wxml 將里面代碼改成這樣

<view>
    <text catchtap="click" class="window">Hello</text>
</view>

其實(shí)也就是加了

• catchtap="click"

這兩個(gè)屬性是什么意思呢 別著急 我會(huì)一一解釋

上圖展示了事件的一些的屬性名稱，這里需要注意紅框標(biāo)注起來的內(nèi)容，區(qū)分出冒泡事件和非冒泡事件，其實(shí)冒泡事件就是需要往上面一層容器傳遞這個(gè)事件。

看了這圖 我們?cè)賮砜?catchtap="click" 的含義
catch 代表非冒泡事件
tap 代表點(diǎn)擊事件
所以連在一起就是非冒泡點(diǎn)擊事件
那后面那個(gè)click是啥
click 其實(shí)只是個(gè)變量名字
我們?cè)趇ndex.js需要用這個(gè)名字綁定接收事件的函數(shù)
我們打開index.js
然后添加如下函數(shù)

  click:function(){
    console.log("點(diǎn)擊了文字");
  },

添加完后代碼長(zhǎng)這樣 紅框中就是 添加的這個(gè)代碼

所以其實(shí)點(diǎn)擊事件的回調(diào)函數(shù) 就是 catchtap="click"
中的 click 后面加上 :function() 構(gòu)成的
現(xiàn)在我們來運(yùn)行程序試試 然后點(diǎn)擊文字

看是不是調(diào)用了 click:function 函數(shù) 并且打出了log

好接下來我們寫點(diǎn)擊一下變色的邏輯
那如何讓一個(gè)文字變色呢，當(dāng)然是css
所以我們需要再index.wxss 中添加一個(gè)樣式

.window-red{
    color:#D23933;
}

然后我們進(jìn)入index.js文件
你會(huì)發(fā)現(xiàn)代碼里面有個(gè) data:{} 它不是page生命周期函數(shù)
其實(shí)他是個(gè)變量的數(shù)組，這個(gè)里面申請(qǐng)的變量都可以在 wxml中使用

我們?cè)谶@里申請(qǐng)一個(gè)color

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

其實(shí)意思就是 將js文件中變量 color的值在這里使用
也就是值等于 window
然后我們?cè)倩氐絠ndex.js文件
在最上面申請(qǐng)一個(gè)變量控制點(diǎn)擊
然后在click:function() 函數(shù)中添加如下代碼

 click:function(){
    console.log("點(diǎn)擊了文字");
      if(flag){
        color = "window-red";
        flag = false;
      }else{
        color = "window";
        flag = true;
      }
      this.setData({
        color
      });
  },

修改完后的代碼如圖

其實(shí)就是在點(diǎn)擊是后 更換color變量的值 而更換的這個(gè)值其實(shí)就是樣式的名稱

更新界面數(shù)據(jù)

這里有個(gè)問題 我們更換完值 但是在wxml中不會(huì)立即生效
所以我們需要調(diào)用
this.setData()方法將值同步給wxml 讓它立即生效

好了我們運(yùn)行程序 點(diǎn)擊Hello 看看是不是點(diǎn)一下 變一下顏色！

---

最后再補(bǔ)充一點(diǎn) index目錄下也是可以配置 json文件的
也就是每個(gè)頁面都可以配置自己獨(dú)特的actionbar顏色等等

以上是“小程序開發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：小程序開發(fā)的示例分析-創(chuàng)新互聯(lián)
本文鏈接：http://jinyejixie.com/article44/egshe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站改版、服務(wù)器托管、網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)