從最早發布的(de)(de)(de)微信(xin)小(xiao)程(cheng)序，到后來(lai)的(de)(de)(de)支付(fu)寶小(xiao)程(cheng)序、釘釘小(xiao)程(cheng)序，字節跳動小(xiao)程(cheng)序、百度小(xiao)程(cheng)序、QQ小(xiao)程(cheng)序等，面對(dui)這(zhe)么多(duo)套(tao)的(de)(de)(de)代碼(ma)(ma)，開發者去編(bian)寫(xie)多(duo)套(tao)原生代碼(ma)(ma)的(de)(de)(de)成本顯(xian)然非(fei)常高，使用H5的(de)(de)(de)話體驗(yan)又(you)沒有原生好，這(zhe)時候只需(xu)編(bian)寫(xie)一套(tao)代碼(ma)(ma)，就能夠適配多(duo)端的(de)(de)(de)能力就顯(xian)得尤為(wei)需(xu)要(yao)。

下面進入正題，給大(da)家介紹下uni-app字節(jie)小程序的開發

前置準備工作

• 默認頭條小程序的APPID已申請成功
• 安裝開發工具
  百度小程序開發者工具
  字節跳動開發者工具
  HBuilderX
  或者其他自己喜歡的IDE都可以

項目開發

新建項目

可以通過 HBuilderX可視化界面 以及(ji) vue-cli命令行(xing) 方(fang)式進行(xing)創建

下面主要介紹(shao)下通過vue-cli命令(ling)行這中方式來新建項目

• 全局安裝vue-cli

npm install -g @vue/cli
復制代碼

• 創建

vue create -p dcloudio/uni-preset-vue user-uni-order
復制代碼

安裝成功后提示(shi)選擇模(mo)板(ban)，我們選擇默(mo)認模(mo)板(ban)就可以了

項目整體流程

 用戶下單(dan)最短流首頁下單(dan)-> 訂單(dan)狀態-> 完成支付(fu), 如下：

 綜上我(wo)們需要做(zuo)的頁面維度： 首(shou)頁，地(di)址檢(jian)索，城市選(xuan)擇(ze)，登錄，個人中心(xin)，訂(ding)單列表(biao)，webview（收費標準 , 預估價格, 訂(ding)單狀態， 訂(ding)單詳情，法律(lv)條款）

制定目錄結構

┌─components      //uni-app組件目錄
│    └─comp-a.vue     //可復用的a組件
├─common   // 通用的js&css工具等
├─hybrid    //存放本地網頁的目錄
├─platforms     //存放各平臺專用頁面的目錄
├─pages       //業務頁面文件存放的目錄
│    ├─index
│    │   └─components   // 頁級別組件
│    │   └─vuex  // index頁面vuex主要存放index的邏輯
│    │   └─index.vue   // index頁面
├─static    //存放應用引用靜態資源（如圖片、視頻等）
│ ├─mp-weixin   //條件編譯png
│     │ └─a.png
│     │ └─b.png
├─store // 狀態統一管理，將各個頁面的vuex匯總
├─service // 匯總請求，api等
│    └─api.js // 接口api相關
│    └─config.js // 環境配置
│    └─index.js
│    └─request.js // 網絡請求
├─ttcomponents // 頭條小程序自定義組件存放目錄 
├─main.js      //Vue初始化入口文件
├─App.vue      //應用配置，用來配置App全局樣式以及監聽 
├─manifest.json //配置應用名稱、appid、logo、版本等打包信息
└─pages.json //配置頁面路由、導航條、選項卡等頁面類信息
復制代碼

運行項目

 想運行到哪(na)個平(ping)臺小程序，首先需要把相應的APPID, IDE路徑對應填寫正(zheng)確(que)

npm run dev:mp-toutiao // 實時監聽編譯
復制代碼

運行成(cheng)功如(ru)下提示：

此時(shi)打開字節(jie)跳(tiao)動IDE進行導入操(cao)作，就(jiu)可以看見頁面啦~~~

Tips：使用字節跳動編譯器打(da)開uni-app編譯的(de)小程序時，必須進行導(dao)入操作(zuo)，而不是新(xin)建(jian)，因為(wei)新(xin)建(jian)會默認(ren)成(cheng)代碼片(pian)段，雖然也可以實時預覽效果但是會導(dao)致(zhi)上(shang)傳功能(neng)確(que)實

具體頁面的開發

首頁開發

• 頁面效果

• 首頁目錄結構

項目中其他頁面的目錄結構(gou)與首頁均相同，后(hou)面不做多(duo)余贅(zhui)述(shu)。

├─pages
│    ├─index
│    │   └─components
│    │   └─vuex
│    │   │  └─index.js // 首頁邏輯
│    │   └─index.vue
復制代碼

• 我們使用vuex來管理狀態，每個頁面都有自己的vuex, 其中index.js存放對應頁面相關邏輯，為了避免頻繁切換目錄，把state, mutations, actions放在一個文件下，使用時并啟用vuex的模塊化，如下

const IndexPage = {
    namespaced: true,  // 啟用模塊化vuex
    state: {
        ... // 需要共享的狀態
    },
    mutations: {
        ... // 一些方法
    }，
    actions: {
        ... // 請求相關
    }
}

export default IndexPage  //最后導出IndexPage
復制代碼

• 各個頁面的vuex統一放在store里

import Vue from 'vue'
import Vuex from 'vuex'

import IndexPage from '../pages/index/vuex'
import AddressSearch from '../pages/address/vuex/index'
import CityListPage from '../pages/city-list/vuex/index'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
  ... // 全局共用的狀態
  },

  mutations: {
  },

  actions: {
  },

  modules: {
    IndexPage, // 首頁vuex
    AddressSearch, // 地址檢索頁vuex
	CityListPage, // 城市列表頁vuex
  },
})

export default store
復制代碼

• 最后，在main.js里面引用

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App,
  store
})
app.$mount()
復制代碼

完整的首(shou)頁邏輯交互框(kuang)架就(jiu)搭建(jian)成功了，以下是開(kai)發首(shou)頁時遇見(jian)的問(wen)題(ti)

首頁開發遇到的問題

• 使用swiper輪播組件，寫好子組件，父組件因為無效果

問(wen)題原因：引入的 import swiper from "../../components/swiper/swiper" ,導致把(ba)自定(ding)義的swiper覆蓋，所以(yi)不展(zhan)示

解決(jue)：引(yin)入(ru)的 import uniSwiper from "../../components/swiper/swiper" ,不和原(yuan)組件命(ming)名沖突即(ji)可

• 轉百度小程序header報錯

問題原因：百度設(she)置(zhi)http請求header如果有中文字符

解決：使用條件編譯，如(ru)果是百(bai)度小程(cheng)序(xu)需要encodeURI 一下(xia)， 或者刪(shan)除header的中文部(bu)分

• uni-app的image標簽，在小程序端不支持動態引入圖片

// 引不到
 <image class="tip_icon" src="/static/sender{{endPoint.address ? '' : '_default'}}.png"/>

復制代碼

// 可以引入
<image class="tip_icon" src="/static/sender.png"/>
復制代碼

• uni.getLocation() 只能獲取經緯度，獲取不到詳細地址信息
• 非 h5 平臺 :key 不支持表達式
  由于:key=" timer__${idx} "的寫法，編譯時控制臺會警告，但是不影響頁面

<view 
    class="column_item" 
    v-for="(item, idx) in item" 
    :key="`timer__${idx}`" // 改成:key="idx" 即可
>
{{item == "立即用車" ? "" : index == 1 ? "時" : index == 2 ? "分" : ""}}
</view>
復制代碼

• 父子組件傳參，類型定義不對不提示錯誤信息，只展示null, 所以遇到null問題可以查看是否是類型定義不一致
• uni-app中的watch不支持監聽小程序，如下

watch: {
    searchType (to) {
      if (to) {
      // 如果是起始地回填起始地信息否則回填目的地信息
        if (to === SEARCH_TYPE.START) {
          this.detailAddress = this.startAddress.detailAddress || ''
        } else {
          this.detailAddress = this.endAddress.detailAddress || ''
        }
      }
    }
}
復制代碼

改成

mounted () {
	if (this.searchType === SEARCH_TYPE.START) {
		this.detailAddress = this.startAddress.detailAddress || ''
	} else {
		this.detailAddress = this.endAddress.detailAddress || ''
	}
}
復制代碼

個人中心開發

• 頁面效果
  
  個人中心主要涉及的H5頁面以及小程序的授權登錄功能。所以主要部分就是webview的實現。
• webview的實現

// template
<web-view id='web-view' v-if='src' :src='src' @bindmessage='onmessage'></web-view>
復制代碼

onLoad (options) {
    console.log('H5入口頁獲取到的參數', options)
    let { src, needLogin} = options
    if(!needLogin){
    	this.src = decodeURIComponent(src)
    	return
    }
    // 需要登錄的 就先獲取臨時token
    this.fetchTempToken(src)
}
復制代碼

如果不需要登錄的(de)H5我們(men)直接賦(fu)值(zhi)到(dao)src即可，需要登錄才能(neng)正常(chang)訪(fang)問的(de)頁(ye)面，首先要獲取臨時token,拿到(dao)臨時token后回傳(chuan)給(gei)服務端(duan)并且采用(yong)中間(jian)頁(ye)redirectUrl的(de)形式跳(tiao)轉。

個人中心開發遇到的問題

• 向網頁傳遞信息要使用頭條api的bindmessage

官方說明“網(wang)頁(ye)向小程序 postMessage 時，會在(zai)特定時機（小程序后退、組件銷毀、分(fen)享）觸發并收(shou)到消息”

// 在小程序中調起H5中的打電話功能
onmessage (e) {
	let { phoneNumber, name } = e.detail
	if(name == 'makePhoneCall'){
		uni.makePhoneCall({
			number: phoneNumber
		})
	}
}
復制代碼

需要注意的(de)web-view的(de)bindmessage屬性(xing)并(bing)不是(shi)實時的(de)

• 真機撥打電話功能不能用

// 使用uni.makePhoneCall真機沒反應
uni.makePhoneCall({ phoneNumber: '114'});

復制代碼

解決：改為頭條api的tt開(kai)頭

// 真機模擬器均可正常使用
tt.makePhoneCall({ phoneNumber: '114'});
復制代碼

登錄開發

• 頭條授權登(deng)錄(lu)效果

• 百(bai)度授(shou)權登(deng)錄效果(guo)

• 大致思路：

  1.首先獲(huo)(huo)取(qu)獲(huo)(huo)取(qu)服務供應商的信(xin)息

  2.調用 uni.getProvider 獲取授權code

  3.獲取用戶的(de)手(shou)機號（用戶登錄頭條app的(de)）

  4.從 @getphonenumber 回調中獲取到用戶信息

  5.調用授權登(deng)錄服(fu)務api

  6.獲取token, openid等(deng)信息

// template
<view class="login-page">
	<view class="title">
		<view class="h-line"></view>
		<view class="page-title">授權登錄更快捷</view>
		<view class="h-line"></view>
	</view>
	<view class="authLogin-wrapper">
		<!-- #ifdef MP-BAIDU -->
		<button type="default" open-type="getPhoneNumber" @getphonenumber="authLoginTap" class="login authLogin">百度登錄更快捷</button>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<button 
			type="default" 
			class="login authLogin"
			open-type="getPhoneNumber"
			@getphonenumber="onGetPhoneNumber"
		>授權手機號快捷登錄</button>
		<!-- #endif -->
	</view>
</view>
復制代碼

// 完成渲染調用授權code方法
mounted () {
	this.getCode()
}
復制代碼

// 獲取授權code方法
async getCode () {
	const [ errorProvider, provider ] = await uni.getProvider({ service: 'oauth' })

	if (errorProvider) {
		console.log('獲取provider失敗')
		return 
	}

	const [ errLogin, data ] =	await uni.login({
		provider: provider.provider[0],
		force: true
	})

	if (errLogin) {
		console.log('獲取code失敗')
        // 失敗的操作，提示等
		return
	}

	const { code } = data
	this.code = code
},

// 頭條獲取到用戶信息  
async onGetPhoneNumber ({ detail }) {
	const { errMsg } = detail
	// 授權失敗
	if (errMsg.indexOf('auth deny') > -1) {
        // 取消授權進行手機驗證碼登錄
		return
	} 
	
	try {
        // 調用服務授權接口
		const { data } = await authLogin({
			code: this.code,
			...detail,
		})
		
		if (data.code === SUCCESS) {
		    // 存token, openid等操作
		    // 重新更新個人信息
		} else {
	        // 失敗的提示等
		}
	} catch (error) {
		// 登錄失敗異常情況處理
	}
	
},
// 百度獲取到用戶信息同理頭條。。。
復制代碼

登錄開發遇到的問題

手機驗(yan)證碼開發(fa)時，引入 checkbox-group 報(bao)錯(cuo),如(ru)下圖：

原因： components : { [CheckBox.name]: CheckBox } 引入組件方式不支持

發布到測試環境

以(yi)字節跳動(dong)為例子，打開字節跳動(dong)開發(fa)者工(gong)具(ju)，在(zai)工(gong)具(ju)欄找到上(shang)傳，填寫版本號，發(fa)布(bu)。版本號不和上(shang)一次沖突就可以(yi)。

Tips: 前(qian)面(mian)有(you)提過，新建代碼片(pian)段是(shi)(shi)在開(kai)發者(zhe)工(gong)具(ju)上(shang)是(shi)(shi)沒有(you)上(shang)傳按鈕的(de)，要導入項目才可以。

上傳成功(gong)后，會提(ti)示進入小(xiao)程序開發者平臺，現在可以看到(dao)開發者的版本(ben)。

上圖二維碼就(jiu)可以只作為本(ben)次的體檢版(ban)本(ben)來掃一掃了。

發布到正式環境

• 前置準備，在后臺配置好相關線上域名

• 切換到線上環境

// 環境相關配置
export const ENV = {
  // 開發環境
  RD: 'rd',
  // 測試環境
  TEST: 'test',
  // 沙箱環境
  BOX: 'box',
  // 線上環境
  ONLINE: 'online'
}

// 環境切換
export function getCurrentEnv() {
  return ENV.ONLINE // 正式環境切到online
}
復制代碼

• 在開發者工具中點擊上傳
• 去小程序開發者平臺提審發布
• 發布成功后可在頭條搜索欄中搜到，抖音的話目前只有安卓平臺上線了小程序功能。

結束語

以上就是(shi)uni-app轉字節跳動、百度小(xiao)程(cheng)序(xu)的部分開(kai)發，相信大(da)家(jia)對uni-app實戰小(xiao)程(cheng)序(xu)已經有了初步認(ren)識，也歡迎大(da)家(jia)指正(zheng)，互(hu)相交流，共同(tong)進步