国产+无码免费视频,日韩一日韩一区二区三电影在线观看,国产精品久久久久久免费,好吊妞国产欧美日韩免费观看

首頁 > 新聞動態(tài) > 行業(yè)動態(tài)

  • 微信小程序開發(fā)教程--從零開始

    作者:廣力云微信閱讀: 時(shí)間:2020-01-13 18:59:10

    從零開始小程序

    今天一不小心拿到了小程序的內(nèi)測資格，為了不辜負(fù)微信團(tuán)隊(duì)的信任，我決定十一奮斗一把！不過話說我可是一個Android工程師??！所以就讓我們從零開始！
    所以本文非常適合非前端工程師學(xué)習(xí)！哈哈！都說小程序出來前端會搶移動端飯碗，但是據(jù)我所知現(xiàn)在好多學(xué)習(xí)的都是移動開發(fā)工程師，誰搶誰的還不一定呢！
    PS：表問我怎么拿到小程序內(nèi)測資格的，有種東西叫內(nèi)部資源！

    • 準(zhǔn)備工作

      • IDE搭建

      • 知識準(zhǔn)備

    • 從零開始

      • app.js

      • app.json

      • app.wxml

      • app.wxss

    • Hello World

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

      • 美化ActionBar

      • 美化頁面

      • 配置首頁

    • 超級Hello World

      • 事件綁定函數(shù)

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

    準(zhǔn)備工作

    IDE搭建

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

    準(zhǔn)備工作



    知識準(zhǔn)備

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

    從零開始

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

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

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

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

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

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

    app.json

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

    app.js

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

    app.wxss

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

    app.wxml

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

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

    PaceSport


    Hello World

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

    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

    美化ActionBar

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

    Paste_Image.png

    Paste_Image.png

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

    Paste_Image.png

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

    美化頁面

    美化頁面我們用到了 wxml 和 wxss文件
    為了程序代碼結(jié)構(gòu)簡潔
    我們需要在跟目錄下創(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為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關(guān)閉
  }})

    函數(shù)解釋如下：

    Paste_Image


    配置首頁

    Json文件負(fù)責(zé)配置頁面路徑
    所以我們在里面加入如下代碼
    其中index的含義 其實(shí)就是指index.js文件
    這里需要說明一點(diǎn) pages 里面的路徑其實(shí)是指向js文件的
    如果一個目錄下沒有該名稱的js文件是會報(bào)錯的！

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

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

    Paste_Image


    超級Hello World

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

    綁定事件

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

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

    其實(shí)也就是加了

    • catchtap="click"

    這兩個屬性是什么意思呢 別著急 我會一一解釋

    Paste_Image.png

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

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

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

    添加完后代碼長這樣 紅框中就是 添加的這個代碼

    Paste_Image


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

    Paste_Image



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

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

    .window-red{
    color:#D23933;}

    Paste_Image.png

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

    Paste_Image.png

    我們在這里申請一個color

    Paste_Image.png

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

    Paste_Image.png

    其實(shí)意思就是 將js文件中變量 color的值在這里使用
    也就是值等于 window
    然后我們再回到index.js文件
    在最上面申請一個變量控制點(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      });
  },

    修改完后的代碼如圖

    Paste_Image


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

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

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

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

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

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

    最后附上github 地址 https://github.com/pwh0996/WXDemo.git



    作者：蒲文輝
    鏈接：https://www.jianshu.com/p/aaef5ceb3936
    來源：簡書
    著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。


  • ? Copyright 2019 深圳市推谷互動網(wǎng)絡(luò)科技有限公司
  • 粵ICP備15107897號-3
微信客服
微信第三方平臺
廣力云

專業(yè)微信營銷顧問

“Hi~ 感謝關(guān)注廣力云

如果您想要深入合作請聯(lián)系客服!

微信號:13332948893” 咨詢電話：13332948893

微信第三方平臺""

添加客服微信