iKcamp出品|微信小程序|工具安裝+目錄說明|基于最新版1.0開發(fā)者工具初中級教程分享

iKcamp官網:http://www.ikcamp.com

訪問官網更快閱讀全部免費分享課程:《iKcamp出品|全網最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級培訓教程分享》忆蚀。
包含:文章吧寺、視頻、源代碼

第一章:小程序初級入門教程

工具安裝

在上一節(jié)第 8 步所展示的頁面中,可以點擊 開發(fā)者工具 直接進入到下載頁面艇肴,也可以直接訪問 官網下載地址蜕衡。然后根據自己的設備選擇相應的下載
安裝過程不再復述,一路默認骆膝。

下載開發(fā)工具

<a>§ 小程序工具起手</a>

此教程選擇的工具為 mac 平臺版本黑毅,沒差

  1. 打開安裝好的 微信web開發(fā)者工具 嚼摩,需要用 管理員開發(fā)者 的微信賬號掃碼登錄。管理員賬號 是上一節(jié)第 6 步中注冊 appID 時矿瘦,綁定的微信賬號枕面。開發(fā)者賬號可在上一節(jié)第 8 步中的 添加開發(fā)者 中設置
  1. 登錄成功后,選擇 本地小程序項目缚去,然后 添加項目
  1. 如果沒有注冊 appID潮秘,也可以開發(fā)小程序項目,但部分功能會受限易结,比如在手機上預覽枕荞。在這里柜候,我們已經有了 appID
  1. 添加成功后,我們的項目會在 微信web開發(fā)者工具 中自動打開并啟動躏精,可以在此工具中對代碼進行修改渣刷、調試、斷點矗烛、預覽辅柴,文件有修改的話,項目會實時更新瞭吃。

目錄說明

項目生成后碌嘀,會看到如下結構的目錄文件:

├─ pages/
│   ├─ index/
│       ├─ index.js
│       ├─ index.wxml
│       ├─ index.wxss
│   ├─ logs/
│       ├─ logs.js
│       ├─ logs.json
│       ├─ logs.wxml
│       ├─ logs.wxss
├── utils/             
│   ├─ util.js
├── app.js                  // 必備文件  
├── app.json                // 必備文件
├── app.wxss

先看下最外層的三個文件:app.jsapp.json 虱而、 app.wxss

  1. app.js
    小程序的主入口文件筏餐,類似于我們在模塊加載器時代(requirejs/seajs)常常會碼一個 main.js 來作為程序的啟動入口开泽。如果你有接觸過 node - express 技術棧牡拇,理解起來會更貼切。注意:<span style="color:red">文件名不可更改</span>
    我們可以在 app.js 里面對小程序在不同生命周期段進行處理穆律,設置小程序里面的 全局變量(比如只請求一次公用的數據惠呼,讓所有的頁面都能用)。
    微信平臺 app.js 說明文檔

  2. app.json
    小程序的全局配置文件峦耘,比如設置小程序有哪幾個頁面組成(目前是 indexlogs)剔蹋、窗口表現(背景色等)、設置網絡超時時間辅髓、設置導航條樣式等背景色泣崩。注意:<span style="color:red">該文件不可添加任何注釋內容</span>
    微信平臺 app.json 配置文檔

  3. app.wxss
    小程序的全局樣式文件,在小程序中洛口,所有的樣式文件不再是 .css 后綴矫付,全都需要以 .wxss 作為后綴。與傳統(tǒng)的 css 樣式相比第焰,wxss 支持 @import 樣式導入和像素單位自適應买优。
    獨立頁面中的局部樣式,請書寫在相對的頁面文件夾中挺举,后面會有說明杀赢。
    微信平臺 app.wxss 樣式說明文檔

小程序的頁面文件

app.json 文件中配置了當前小程序的兩個頁面 pages/index/indexpages/logs/logs,可以看到湘纵,其實就是 文件的路徑+文件名 組成脂崔。如果增加一個頁面,需要在參數 pages 中把頁面的地址配置進去梧喷。

細心的同學可能已經發(fā)現一個現象脱篙,每個頁面文件夾娇钱,與里面的文件,名字都一樣一樣滴绊困。是的文搂,一般情況下,一個完整的頁面需要 js 秤朗、wxss(css)煤蹭、wxml(html) 組成。
比如 index 頁面取视,如果需要對 index 頁面進行一些獨立的配置硝皂,需要像 logs 一樣,增加 index.json 文件來保存配置信息作谭。

來看下 wxml 文件與 html 文件的區(qū)別

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

傳統(tǒng)的 html 文件由各種各樣的標簽組成稽物,而在 wxml 中,可用的標簽元素并不多折欠,可以看到這里涉及到了 view贝或、imagetext標簽锐秦。

  • view 相當于 div咪奖,你可以這么去理解。
  • image 相當于 img酱床,這個應該都懂了羊赵。
  • text 很明顯,用來標注文本的標簽,既然是 文本,肯定是 行級元素 了皂贩。

還有一些內置好的組件標簽,自帶樣式和特性靡挥,詳見 官方文檔

頁面樣式表 index.wxss

作用域只在當前頁面生效,它可以覆蓋 app.wxss 里面的樣式規(guī)則衩茸∏垩可以看到,與平時我們用的樣式文件基本沒差:

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}


頁面腳本文件 index.js

app.js 一樣楞慈,包含了一個頁面的生命周期幔烛,聲明并處理數據,響應頁面交互事件等囊蓝。

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是網絡請求饿悬,可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

下期更新內容:小程序初級入門教程-小試牛刀+發(fā)布流程

iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東聚霜、當當開售狡恬。


相關文章:
聽說 2017 你想寫前端珠叔?
前端開發(fā)者指南(2017)
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市弟劲,隨后出現的幾起案子祷安,更是在濱河造成了極大的恐慌,老刑警劉巖兔乞,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汇鞭,死亡現場離奇詭異,居然都是意外死亡庸追,警方通過查閱死者的電腦和手機霍骄,發(fā)現死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來淡溯,“玉大人读整,你說我怎么就攤上這事≡廴ⅲ” “怎么了米间?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長豺总。 經常有香客問我车伞,道長择懂,這世上最難降的妖魔是什么喻喳? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮困曙,結果婚禮上表伦,老公的妹妹穿的比我還像新娘。我一直安慰自己慷丽,他們只是感情好蹦哼,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著要糊,像睡著了一般纲熏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锄俄,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天局劲,我揣著相機與錄音,去河邊找鬼奶赠。 笑死鱼填,一個胖子當著我的面吹牛,可吹牛的內容都是我干的毅戈。 我是一名探鬼主播苹丸,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼愤惰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了赘理?” 一聲冷哼從身側響起宦言,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎商模,沒想到半個月后蜡励,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡阻桅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年凉倚,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嫂沉。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡稽寒,死狀恐怖,靈堂內的尸體忽然破棺而出趟章,到底是詐尸還是另有隱情杏糙,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布蚓土,位于F島的核電站宏侍,受9級特大地震影響,放射性物質發(fā)生泄漏蜀漆。R本人自食惡果不足惜谅河,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望确丢。 院中可真熱鬧绷耍,春花似錦、人聲如沸鲜侥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽描函。三九已至崎苗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間舀寓,已是汗流浹背胆数。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留基公,地道東北人幅慌。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像轰豆,于是被迫代替她去往敵國和親胰伍。 傳聞我的和親對象是個殘疾皇子齿诞,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容