小程序模板網(wǎng)

uni-app轉(zhuǎn)字節(jié)跳動、百度小程序手摸手實戰(zhàn)

發(fā)布時間:2020-05-15 10:33 所屬欄目:小程序開發(fā)教程

從最早發(fā)布的微信小程序,到后來的支付寶小程序、釘釘小程序,字節(jié)跳動小程序、百度小程序、QQ小程序等,面對這么多套的代碼,開發(fā)者去編寫多套原生代碼的成本顯然非常高,使用H5的話體驗又沒有原生好,這時候只需編寫一套代碼,就能夠適配多端的能力就顯得尤為需要。

下面進入正題,給大家介紹下uni-app字節(jié)小程序的開發(fā)

前置準備工作

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

項目開發(fā)

新建項目

可以通過 HBuilderX可視化界面 以及 vue-cli命令行 方式進行創(chuàng)建

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

  • 全局安裝vue-cli
npm install -g @vue/cli
復制代碼
  • 創(chuàng)建
vue create -p dcloudio/uni-preset-vue user-uni-order
復制代碼

安裝成功后提示選擇模板,我們選擇默認模板就可以了

項目整體流程

用戶下單最短流首頁下單-> 訂單狀態(tài)-> 完成支付, 如下:

綜上我們需要做的頁面維度: 首頁,地址檢索,城市選擇,登錄,個人中心,訂單列表,webview(收費標準 , 預估價格, 訂單狀態(tài), 訂單詳情,法律條款)

制定目錄結構

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

運行項目

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

npm run dev:mp-toutiao // 實時監(jiān)聽編譯
復制代碼

運行成功如下提示:

此時打開字節(jié)跳動IDE進行導入操作,就可以看見頁面啦~~~

Tips:使用字節(jié)跳動編譯器打開uni-app編譯的小程序時,必須進行導入操作,而不是新建,因為新建會默認成代碼片段,雖然也可以實時預覽效果但是會導致上傳功能確實

具體頁面的開發(fā)

首頁開發(fā)

  • 頁面效果

  • 首頁目錄結構

項目中其他頁面的目錄結構與首頁均相同,后面不做多余贅述。

├─pages
│    ├─index
│    │   └─components
│    │   └─vuex
│    │   │  └─index.js // 首頁邏輯
│    │   └─index.vue
復制代碼
  • 我們使用vuex來管理狀態(tài),每個頁面都有自己的vuex, 其中index.js存放對應頁面相關邏輯,為了避免頻繁切換目錄,把state, mutations, actions放在一個文件下,使用時并啟用vuex的模塊化,如下
const IndexPage = {
    namespaced: true,  // 啟用模塊化vuex
    state: {
        ... // 需要共享的狀態(tài)
    },
    mutations: {
        ... // 一些方法
    },
    actions: {
        ... // 請求相關
    }
}

export default IndexPage  //最后導出IndexPage
復制代碼
  • 各個頁面的vuex統(tǒng)一放在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: {
  ... // 全局共用的狀態(tài)
  },

  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()
復制代碼

完整的首頁邏輯交互框架就搭建成功了,以下是開發(fā)首頁時遇見的問題

首頁開發(fā)遇到的問題

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

問題原因:引入的 import swiper from "../../components/swiper/swiper" ,導致把自定義的swiper覆蓋,所以不展示

解決:引入的 import uniSwiper from "../../components/swiper/swiper" ,不和原組件命名沖突即可

  • 轉(zhuǎn)百度小程序header報錯

問題原因:百度設置http請求header如果有中文字符

解決:使用條件編譯,如果是百度小程序需要encodeURI 一下, 或者刪除header的中文部分

  • uni-app的image標簽,在小程序端不支持動態(tài)引入圖片
// 引不到
 <image class="tip_icon" src="/static/sender{{endPoint.address ? '' : '_default'}}.png"/>

復制代碼
// 可以引入
<image class="tip_icon" src="/static/sender.png"/>
復制代碼
  • uni.getLocation() 只能獲取經(jīng)緯度,獲取不到詳細地址信息
  • 非 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不支持監(jiān)聽小程序,如下
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 || ''
	}
}
復制代碼

個人中心開發(fā)

  • 頁面效果

    個人中心主要涉及的H5頁面以及小程序的授權登錄功能。所以主要部分就是webview的實現(xiàn)。
  • webview的實現(xiàn)
// template
<web-view id='web-view' v-if='src' :src='src' @bindmessage='onmessage'></web-view>
復制代碼
onLoad (options) {
    console.log('H5入口頁獲取到的參數(shù)', options)
    let { src, needLogin} = options
    if(!needLogin){
    	this.src = decodeURIComponent(src)
    	return
    }
    // 需要登錄的 就先獲取臨時token
    this.fetchTempToken(src)
}
復制代碼

如果不需要登錄的H5我們直接賦值到src即可,需要登錄才能正常訪問的頁面,首先要獲取臨時token,拿到臨時token后回傳給服務端并且采用中間頁redirectUrl的形式跳轉(zhuǎn)。

個人中心開發(fā)遇到的問題

  • 向網(wǎng)頁傳遞信息要使用頭條api的bindmessage

官方說明“網(wǎng)頁向小程序 postMessage 時,會在特定時機(小程序后退、組件銷毀、分享)觸發(fā)并收到消息”

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

需要注意的web-view的bindmessage屬性并不是實時的

  • 真機撥打電話功能不能用
// 使用uni.makePhoneCall真機沒反應
uni.makePhoneCall({ phoneNumber: '114'});

復制代碼

解決:改為頭條api的tt開頭

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

登錄開發(fā)

  • 頭條授權登錄效果

  • 百度授權登錄效果

  • 大致思路:

    1.首先獲取獲取服務供應商的信息

    2.調(diào)用 uni.getProvider 獲取授權code

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

    4.從 @getphonenumber 回調(diào)中獲取到用戶信息

    5.調(diào)用授權登錄服務api

    6.獲取token, openid等信息

// 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>
復制代碼
// 完成渲染調(diào)用授權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 {
        // 調(diào)用服務授權接口
		const { data } = await authLogin({
			code: this.code,
			...detail,
		})
		
		if (data.code === SUCCESS) {
		    // 存token, openid等操作
		    // 重新更新個人信息
		} else {
	        // 失敗的提示等
		}
	} catch (error) {
		// 登錄失敗異常情況處理
	}
	
},
// 百度獲取到用戶信息同理頭條。。。
復制代碼

登錄開發(fā)遇到的問題

手機驗證碼開發(fā)時,引入 checkbox-group 報錯,如下圖:

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

發(fā)布到測試環(huán)境

以字節(jié)跳動為例子,打開字節(jié)跳動開發(fā)者工具,在工具欄找到上傳,填寫版本號,發(fā)布。版本號不和上一次沖突就可以。

Tips: 前面有提過,新建代碼片段是在開發(fā)者工具上是沒有上傳按鈕的,要導入項目才可以。

上傳成功后,會提示進入小程序開發(fā)者平臺,現(xiàn)在可以看到開發(fā)者的版本。

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

發(fā)布到正式環(huán)境

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

  • 切換到線上環(huán)境
// 環(huán)境相關配置
export const ENV = {
  // 開發(fā)環(huán)境
  RD: 'rd',
  // 測試環(huán)境
  TEST: 'test',
  // 沙箱環(huán)境
  BOX: 'box',
  // 線上環(huán)境
  ONLINE: 'online'
}

// 環(huán)境切換
export function getCurrentEnv() {
  return ENV.ONLINE // 正式環(huán)境切到online
}
復制代碼
  • 在開發(fā)者工具中點擊上傳
  • 去小程序開發(fā)者平臺提審發(fā)布
  • 發(fā)布成功后可在頭條搜索欄中搜到,抖音的話目前只有安卓平臺上線了小程序功能。

結束語

以上就是uni-app轉(zhuǎn)字節(jié)跳動、百度小程序的部分開發(fā),相信大家對uni-app實戰(zhàn)小程序已經(jīng)有了初步認識,也歡迎大家指正,互相交流,共同進步



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25190.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢