uni-app轉(zhuǎn)字節(jié)跳動(dòng)、百度小程序手摸手實(shí)戰(zhàn)
|
從最早發(fā)布的微信小程序，到后來(lái)的支付寶小程序、釘釘小程序，字節(jié)跳動(dòng)小程序、百度小程序、QQ小程序等，面對(duì)這么多套的代碼，開(kāi)發(fā)者去編寫多套原生代碼的成本顯然非常高，使用H5的話體驗(yàn)又沒(méi)有原生好，這時(shí)候只需編寫一套代碼，就能夠適配多端的能力就顯得尤為需要。 下面進(jìn)入正題，給大家介紹下uni-app字節(jié)小程序的開(kāi)發(fā) 前置準(zhǔn)備工作
項(xiàng)目開(kāi)發(fā)新建項(xiàng)目可以通過(guò) HBuilderX可視化界面 以及 vue-cli命令行 方式進(jìn)行創(chuàng)建 下面主要介紹下通過(guò)vue-cli命令行這中方式來(lái)新建項(xiàng)目
npm install -g @vue/cli 復(fù)制代碼
vue create -p dcloudio/uni-preset-vue user-uni-order 復(fù)制代碼 安裝成功后提示選擇模板，我們選擇默認(rèn)模板就可以了 項(xiàng)目整體流程用戶下單最短流首頁(yè)下單-> 訂單狀態(tài)-> 完成支付, 如下：
綜上我們需要做的頁(yè)面維度： 首頁(yè)，地址檢索，城市選擇，登錄，個(gè)人中心，訂單列表，webview（收費(fèi)標(biāo)準(zhǔn) , 預(yù)估價(jià)格, 訂單狀態(tài)， 訂單詳情，法律條款） 制定目錄結(jié)構(gòu)┌─components //uni-app組件目錄 │ └─comp-a.vue //可復(fù)用的a組件 ├─common // 通用的js&css工具等 ├─hybrid //存放本地網(wǎng)頁(yè)的目錄 ├─platforms //存放各平臺(tái)專用頁(yè)面的目錄 ├─pages //業(yè)務(wù)頁(yè)面文件存放的目錄 │ ├─index │ │ └─components // 頁(yè)級(jí)別組件 │ │ └─vuex // index頁(yè)面vuex主要存放index的邏輯 │ │ └─index.vue // index頁(yè)面 ├─static //存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等） │ ├─mp-weixin //條件編譯png │ │ └─a.png │ │ └─b.png ├─store // 狀態(tài)統(tǒng)一管理，將各個(gè)頁(yè)面的vuex匯總 ├─service // 匯總請(qǐng)求，api等 │ └─api.js // 接口api相關(guān) │ └─config.js // 環(huán)境配置 │ └─index.js │ └─request.js // 網(wǎng)絡(luò)請(qǐng)求 ├─ttcomponents // 頭條小程序自定義組件存放目錄 ├─main.js //Vue初始化入口文件 ├─App.vue //應(yīng)用配置，用來(lái)配置App全局樣式以及監(jiān)聽(tīng) ├─manifest.json //配置應(yīng)用名稱、appid、logo、版本等打包信息 └─pages.json //配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類信息 復(fù)制代碼 運(yùn)行項(xiàng)目想運(yùn)行到哪個(gè)平臺(tái)小程序，首先需要把相應(yīng)的APPID, IDE路徑對(duì)應(yīng)填寫正確 npm run dev:mp-toutiao // 實(shí)時(shí)監(jiān)聽(tīng)編譯 復(fù)制代碼 運(yùn)行成功如下提示：
此時(shí)打開(kāi)字節(jié)跳動(dòng)IDE進(jìn)行導(dǎo)入操作，就可以看見(jiàn)頁(yè)面啦~~~ Tips：使用字節(jié)跳動(dòng)編譯器打開(kāi)uni-app編譯的小程序時(shí)，必須進(jìn)行導(dǎo)入操作，而不是新建，因?yàn)樾陆〞?huì)默認(rèn)成代碼片段，雖然也可以實(shí)時(shí)預(yù)覽效果但是會(huì)導(dǎo)致上傳功能確實(shí) 具體頁(yè)面的開(kāi)發(fā)首頁(yè)開(kāi)發(fā)
項(xiàng)目中其他頁(yè)面的目錄結(jié)構(gòu)與首頁(yè)均相同，后面不做多余贅述。 ├─pages │ ├─index │ │ └─components │ │ └─vuex │ │ │ └─index.js // 首頁(yè)邏輯 │ │ └─index.vue 復(fù)制代碼
const IndexPage = {
namespaced: true, // 啟用模塊化vuex
state: {
... // 需要共享的狀態(tài)
},
mutations: {
... // 一些方法
}，
actions: {
... // 請(qǐng)求相關(guān)
}
}
export default IndexPage //最后導(dǎo)出IndexPage
復(fù)制代碼
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: {
... // 全局共用的狀態(tài)
},
mutations: {
},
actions: {
},
modules: {
IndexPage, // 首頁(yè)vuex
AddressSearch, // 地址檢索頁(yè)vuex
CityListPage, // 城市列表頁(yè)vuex
},
})
export default store
復(fù)制代碼
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()
復(fù)制代碼
完整的首頁(yè)邏輯交互框架就搭建成功了，以下是開(kāi)發(fā)首頁(yè)時(shí)遇見(jiàn)的問(wèn)題 首頁(yè)開(kāi)發(fā)遇到的問(wèn)題
問(wèn)題原因：引入的 import swiper from "../../components/swiper/swiper" ,導(dǎo)致把自定義的swiper覆蓋，所以不展示 解決：引入的 import uniSwiper from "../../components/swiper/swiper" ,不和原組件命名沖突即可
問(wèn)題原因：百度設(shè)置http請(qǐng)求header如果有中文字符 解決：使用條件編譯，如果是百度小程序需要encodeURI 一下， 或者刪除header的中文部分
// 引不到
<image class="tip_icon" src="/static/sender{{endPoint.address ? '' : '_default'}}.png"/>
復(fù)制代碼
// 可以引入 <image class="tip_icon" src="/static/sender.png"/> 復(fù)制代碼
<view
class="column_item"
v-for="(item, idx) in item"
:key="`timer__${idx}`" // 改成:key="idx" 即可
>
{{item == "立即用車" ? "" : index == 1 ? "時(shí)" : index == 2 ? "分" : ""}}
</view>
復(fù)制代碼
watch: {
searchType (to) {
if (to) {
// 如果是起始地回填起始地信息否則回填目的地信息
if (to === SEARCH_TYPE.START) {
this.detailAddress = this.startAddress.detailAddress || ''
} else {
this.detailAddress = this.endAddress.detailAddress || ''
}
}
}
}
復(fù)制代碼
改成
mounted () {
if (this.searchType === SEARCH_TYPE.START) {
this.detailAddress = this.startAddress.detailAddress || ''
} else {
this.detailAddress = this.endAddress.detailAddress || ''
}
}
復(fù)制代碼
個(gè)人中心開(kāi)發(fā)
// template <web-view id='web-view' v-if='src' :src='src' @bindmessage='onmessage'></web-view> 復(fù)制代碼
onLoad (options) {
console.log('H5入口頁(yè)獲取到的參數(shù)', options)
let { src, needLogin} = options
if(!needLogin){
this.src = decodeURIComponent(src)
return
}
// 需要登錄的 就先獲取臨時(shí)token
this.fetchTempToken(src)
}
復(fù)制代碼
如果不需要登錄的H5我們直接賦值到src即可，需要登錄才能正常訪問(wèn)的頁(yè)面，首先要獲取臨時(shí)token,拿到臨時(shí)token后回傳給服務(wù)端并且采用中間頁(yè)redirectUrl的形式跳轉(zhuǎn)。 個(gè)人中心開(kāi)發(fā)遇到的問(wèn)題
官方說(shuō)明“網(wǎng)頁(yè)向小程序 postMessage 時(shí)，會(huì)在特定時(shí)機(jī)（小程序后退、組件銷毀、分享）觸發(fā)并收到消息”
// 在小程序中調(diào)起H5中的打電話功能
onmessage (e) {
let { phoneNumber, name } = e.detail
if(name == 'makePhoneCall'){
uni.makePhoneCall({
number: phoneNumber
})
}
}
復(fù)制代碼
需要注意的web-view的bindmessage屬性并不是實(shí)時(shí)的
// 使用uni.makePhoneCall真機(jī)沒(méi)反應(yīng)
uni.makePhoneCall({ phoneNumber: '114'});
復(fù)制代碼
解決：改為頭條api的tt開(kāi)頭
// 真機(jī)模擬器均可正常使用
tt.makePhoneCall({ phoneNumber: '114'});
復(fù)制代碼
登錄開(kāi)發(fā)
// template <view class="login-page"> <view class="title"> <view class="h-line"></view> <view class="page-title">授權(quán)登錄更快捷</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" >授權(quán)手機(jī)號(hào)快捷登錄</button> <!-- #endif --> </view> </view> 復(fù)制代碼
// 完成渲染調(diào)用授權(quán)code方法
mounted () {
this.getCode()
}
復(fù)制代碼
// 獲取授權(quán)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
// 授權(quán)失敗
if (errMsg.indexOf('auth deny') > -1) {
// 取消授權(quán)進(jìn)行手機(jī)驗(yàn)證碼登錄
return
}
try {
// 調(diào)用服務(wù)授權(quán)接口
const { data } = await authLogin({
code: this.code,
...detail,
})
if (data.code === SUCCESS) {
// 存token, openid等操作
// 重新更新個(gè)人信息
} else {
// 失敗的提示等
}
} catch (error) {
// 登錄失敗異常情況處理
}
},
// 百度獲取到用戶信息同理頭條。。。
復(fù)制代碼
登錄開(kāi)發(fā)遇到的問(wèn)題手機(jī)驗(yàn)證碼開(kāi)發(fā)時(shí)，引入 checkbox-group 報(bào)錯(cuò),如下圖：
原因： components : { [CheckBox.name]: CheckBox } 引入組件方式不支持 發(fā)布到測(cè)試環(huán)境以字節(jié)跳動(dòng)為例子，打開(kāi)字節(jié)跳動(dòng)開(kāi)發(fā)者工具，在工具欄找到上傳，填寫版本號(hào)，發(fā)布。版本號(hào)不和上一次沖突就可以。 Tips: 前面有提過(guò)，新建代碼片段是在開(kāi)發(fā)者工具上是沒(méi)有上傳按鈕的，要導(dǎo)入項(xiàng)目才可以。
上傳成功后，會(huì)提示進(jìn)入小程序開(kāi)發(fā)者平臺(tái)，現(xiàn)在可以看到開(kāi)發(fā)者的版本。
 上圖二維碼就可以只作為本次的體檢版本來(lái)掃一掃了。 發(fā)布到正式環(huán)境
// 環(huán)境相關(guān)配置
export const ENV = {
// 開(kāi)發(fā)環(huán)境
RD: 'rd',
// 測(cè)試環(huán)境
TEST: 'test',
// 沙箱環(huán)境
BOX: 'box',
// 線上環(huán)境
ONLINE: 'online'
}
// 環(huán)境切換
export function getCurrentEnv() {
return ENV.ONLINE // 正式環(huán)境切到online
}
復(fù)制代碼
結(jié)束語(yǔ)以上就是uni-app轉(zhuǎn)字節(jié)跳動(dòng)、百度小程序的部分開(kāi)發(fā)，相信大家對(duì)uni-app實(shí)戰(zhàn)小程序已經(jīng)有了初步認(rèn)識(shí)，也歡迎大家指正，互相交流，共同進(jìn)步 |
