首先了解下小程序是干嘛的骏掀？

小程序是一種新的開放能力，開發(fā)者可以快速地開發(fā)一個小程序柱告。小程序可以在微信內(nèi)被便捷地獲取和傳播截驮，同時具有出色的使用體驗。（簡單點來說就是在手機上不用下載App际度，在微信里通過小程序也能得到App類似的友好體驗）

開發(fā)一個小程序需要具備哪些技能葵袭？

在開發(fā)小程序之前，你至少需要掌握 HTML乖菱、CSS坡锡、JavaScript這三種語言即可，而這三種語言也就是前端三劍客窒所，正是我們天天都在搞的事鹉勒。

image.png

開發(fā)一個小程序前需要做的準備工作

點擊申請 根據(jù)指引填寫信息和提交相應(yīng)的資料，就可以擁有自己的小程序帳號吵取。

image.png

image.png

image.png

app.json

app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑捺氢、界面表現(xiàn)藻丢、底部 tab 等。
然后我們來看頁面組成部分摄乒，
每一個小程序頁面都是由四部分組成：

第一個：.json 后綴的 JSON 配置文件

{
  "pages":[
    "pages/index/index"郁岩，
    "pages/newpage/newpage"   //比如我如果需要新建一個頁面, 這樣添加路由即可
  ],
  "window":{  //window是配置小程序頁面樣式比如主題顏色，標題等等
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "青團兼職實習",
    "navigationBarTextStyle":"black"
  }
}

設(shè)置小程序底部tabbar

image.png

第二個：.wxml 后綴的 WXML 模板文件 （類似于html）

HTML 經(jīng)常會用到的標簽是 div, p, span缺狠，而小程序的 WXML 用的標簽是 view, button, text 等等，具體有哪些可以查看下傳送門
官方快速創(chuàng)建源碼為：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image 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>

第三個：.wxss 后綴的 WXSS 樣式文件 （完全類似css）

完全就是跟CSS一毛一樣萍摊，方便了三劍客挤茄，WXSS 在底層支持新的尺寸單位 rpx ，省去了我們換算的煩惱冰木。

image.png

第四個：.js 后綴的 Javascript 腳本邏輯文件 （就是js）

image.png

我們做個測試穷劈，你需要把一個 hello, coder 的字符串顯示在界面上笼恰。 WXML 是這么寫：

<view>{{message}}</view>

JS 只需要管理狀態(tài)即可:

this.setData({   //this.setData 是官方提供的使視圖變更的方法，跟Vue不一樣的是所有變量賦值完成后需要使用該方法觸發(fā)視圖更新
  message: 'hello, coder'
})

這樣寫即可正常把數(shù)據(jù)綁定上歇终。
渲染后就是：

<view>hello, coder</view>

*小程序的生命周期：

image.png

這里我就挑兩個舉例子：onLoad和onShow
簡單理解下 onLoad里面的方法就是進入頁面后社证，只執(zhí)行一次就不會再執(zhí)行了，可以在 onLoad 中獲取打開當前頁面所調(diào)用的 query 參數(shù)评凝。
而onShow是只要頁面隱藏追葡，也就是跳轉(zhuǎn)頁面了或者使用圖片預(yù)覽功能擋住當前頁面了，圖片預(yù)覽一關(guān)閉奕短，頁面就會執(zhí)行一次onShow里面的方法宜肉。再比如我們在當前頁面進行操作后跳轉(zhuǎn)走，返回的時候希望更改狀態(tài)那就使用onShow翎碑。

image.png

*頁面內(nèi)基礎(chǔ)組件

1.<view></view> 視圖容器(相當于div)谬返。
2.<text></text> 文本 （相當于span，以前業(yè)務(wù)里有個需要長按復(fù)制的功能日杈，view長按復(fù)制不了遣铝，text提供了一個selectable的屬性 可以控制文本是否可長按復(fù)制）
3.所有的表單組件 form，input莉擒，radio酿炸，checkbox，label啰劲，button等梁沧，其中button組件賦予了很多高級功能。比如點擊獲取用戶信息

a) <button open-type="getUserInfo"></button>

獲取用戶授權(quán)信息蝇裤，如下圖：

image.png

b) <button open-type="contact"></button>

打開客服功能 如下圖：

image.png

c) <button open-type="share"></button>

喚起分享好友操作面板廷支，如下圖：

image.png

d)

<button open-type="getPhoneNumber"></button>獲取當前微信綁定的手機號，需要后端解析json文件栓辜，才能拿到用戶手機號恋拍，如下圖：

image.png

e) <button open-type="launchApp"></button>

這個操作就圖片展示不了了，功能是App分享出來的小程序可通過這個方法 跳轉(zhuǎn)回App（如果不是App分享出來的小程序那就跳轉(zhuǎn)不回App）

f) <button open-type="openSetting"></button>

跳轉(zhuǎn)用戶授權(quán)設(shè)置頁面藕甩，如下圖：

image.png

這里面本地環(huán)境和開發(fā)者工具上 獲取用戶信息施敢，跳轉(zhuǎn)客服頁面，是沒有彈窗了狭莱，只能真機調(diào)試僵娃，分享的操作面板也跟真機不一致（一切以真機為準，有些功能在開發(fā)者工具上可行腋妙，在真機上就不行了默怨，差異挺大的）

媒體組件

<image></image> 圖片組件，該組件所有的圖片都有個默認的寬高度300 x 225px骤素，去掉默認寬高設(shè)置mode=“widthFix” 即可匙睹，意思是寬度不變愚屁，高度自動變化，保持原圖寬高比不變

當然還少不了地圖組件：
<map></map>
map 組件是由客戶端創(chuàng)建的原生組件痕檬，它的層級是最高的霎槐，不能通過 z-index 控制層級。

這里列了一個常用的基礎(chǔ)組件列表梦谜。當然官方也提供了更多的組件, 總的來說組件還是挺多的 但是有些原生組件導(dǎo)致的bug太多丘跌，官方也說是微信底層邏輯不太好統(tǒng)一修改，只能由我們來做兼容處理了改淑。多啰嗦一句這里面問題最多的是textarea組件碍岔，慎用啊～

*路由配置以及跳轉(zhuǎn)方法

在小程序中所有頁面的路由全部由框架進行管理。
頁面以棧的方式進行管理朵夏，以數(shù)組形式按棧的順序給出蔼啦，第一個元素為首頁，最后一個元素為當前頁面仰猖。
1.wx.navigateTo 保留當前頁面捏肢，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面（常用）
2.wx.redirectTo 關(guān)閉當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面饥侵。
3.wx.navigateBack 關(guān)閉當前頁面鸵赫，返回上一頁面或多級頁面□锷可通過 getCurrentPages() 獲取當前的頁面棧辩棒，決定需要返回幾層。
4.wx.switchTab 跳轉(zhuǎn)到 tabBar 頁面膨疏，并關(guān)閉其他所有非 tabBar 頁面（也就是頁面出棧）

5. wx.reLaunch 關(guān)閉所有頁面一睁，打開到應(yīng)用內(nèi)的某個頁面。

// 注意：調(diào)用 navigateTo 跳轉(zhuǎn)時佃却，調(diào)用該方法的頁面會被加入堆棧者吁，而 redirectTo 方法則不會。見下方示例代碼

// 此處是第二個頁面
wx.navigateTo({
  url: 'pages/pages/second'
})

// 此處是三頁面
wx.navigateTo({
  url: 'pages/third/third'
})

// 在第三個頁面內(nèi) navigateBack饲帅，將返回第一個頁面
wx.navigateBack({
  delta: 2
})

image.png

*自定義轉(zhuǎn)發(fā)字段

有些頁面是需要做轉(zhuǎn)發(fā)的复凳，那就需要在js里定義onShareAppMessage方法，可手動設(shè)置頁面分享內(nèi)容等等（高級版webview分享信息傳遞灶泵，下一章節(jié)會提到）

Page({
  onShareAppMessage: function () {
    return {
      title: '青團社兼職-大學生找兼職首選平臺',
      path: '/page/partdetails/partdetails?partJobId=xxx'
    }
  }
})

*模塊化

可以將一些公共的代碼抽離成為一個單獨的 js 文件育八，作為一個模塊。模塊只有通過 module.exports才能對外暴露接口赦邻。

// common.js
function qtshe_part(name) {
  console.log(`歡迎觀看這篇文章 ${name} !`)
}
function qtshe_job(name) {
  console.log(`感謝觀看完這篇文章 ${name} !`)
}

module.exports.qtshe_part = qtshe_part 
或者 exports.qtshe_job = qtshe_job

需要引用的地方

var common = require('common.js')
partJob: function() {
    common. qtshe_part('前端攻城獅')
},
userJob() {
    common. qtshe_job('前端攻城獅')
}

*最后要了解的肯定是數(shù)據(jù)請求了

通過該方法可以發(fā)起一個POST請求髓棋，請求相關(guān)

wx.request({
  url: 'xxx',  //服務(wù)器接口地址
  data: { //請求的參數(shù)
     x: '' , 
     y: ''
  },
  header: { //設(shè)置請求的 header，header 中不能設(shè)置 Referer深纲。
      'content-type': 'application/json' // 默認值
  },
  method: 'POST',  //（需大寫）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  success: function(res) { //成功回調(diào)
    console.log(res.data)
  },
  fail: function(res) { //失敗回調(diào)
    console.log(res.errMsg) 
  }
})

結(jié)語：

第一章就說到這里了仲锄，這里只是簡單的介紹了小程序的組成以及開發(fā)需要用的地方，下一章節(jié)將會講到小程序的自定義組件開發(fā)以及webview配置問題湃鹊，以及其他相關(guān)功能組件具體可以在微信搜一搜 搜索兼職 然后通過服務(wù)直達區(qū)找到 《青團社兼職實習》儒喊，有什么問題或意見歡迎指出。

青團社招聘：

招聘崗位：高級前端開發(fā)工程師P5及以上
坐標杭州市余杭區(qū)文一西路1380號金之源大廈11層

簡歷投遞到：hr@qtshe.com || haochen@qtshe.com

職位描述：

1币呵、建設(shè)工具怀愧、提煉組件、抽象框架余赢，促進前端工程化芯义、服務(wù)化，持續(xù)提升研發(fā)效率妻柒，保障線上產(chǎn)品質(zhì)量

2扛拨、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺举塔，指導(dǎo)落實解決方案

3绑警、持續(xù)優(yōu)化前端頁面性能，維護前端代碼規(guī)范央渣，鉆研各種前沿技術(shù)和創(chuàng)新交互计盒，增強用戶體驗、開拓前端能力邊界