uni-app開(kāi)發(fā)小程序的完整流程記錄
一、項(xiàng)目準(zhǔn)備工作
1.uni-app介紹(地址)
uni-app是一個(gè)使用Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫(xiě)一套代碼,可發(fā)布到iOS、Android、Web(響應(yīng)式)、以及各種小程序(微信/支付寶/百度/頭條/飛書(shū)/QQ/快手/釘釘/淘寶)、快應(yīng)用等多個(gè)平臺(tái)。
2.開(kāi)發(fā)工具下載和安裝
2.1介紹
uni-app官方推薦使用HBuilderX來(lái)開(kāi)發(fā)uni-app類(lèi)型的項(xiàng)目,
主要好處:模板豐富、完善的智能提示、一鍵運(yùn)行
2.2下載HBuilderX
1.下載的地址https://www.dcloud.io/hbuilderx.html
2.下載 正式版->App開(kāi)發(fā)版
2.3安裝HBuilderX
1.將下載的zip包進(jìn)行解壓
2.將解壓的文件放到一個(gè)純英文的目錄下
3.雙擊HBuilderX.exe即可啟動(dòng)HBuilderX
3.開(kāi)發(fā)工具的配置
3.1安裝scss/sass編譯
介紹
為了方便編寫(xiě)樣式,建議安裝'scss/sass編輯'插件
下載地址 (scss/sass編譯 - DCloud 插件市場(chǎng))
操作步驟:1.先注冊(cè) 2.點(diǎn)擊下載插件并導(dǎo)入HBuilderX
3.2快捷鍵方案切換
操作步驟:工具->預(yù)設(shè)快捷鍵方案切換->vs Code
3.3修改編輯器的基本設(shè)置
操作步驟:工具->設(shè)置 ,點(diǎn)擊源碼視圖
二、項(xiàng)目開(kāi)發(fā)
1.網(wǎng)絡(luò)請(qǐng)求配置
1.1.介紹(@escook/request-miniprogram - npm)
由于平臺(tái)限制,小程序不支持axios,而且原生的wx.request()API功能較為簡(jiǎn)單,不支持?jǐn)r截器等全局定制的功能,因此建議在uni-app項(xiàng)目中使用@escook/request-miniprogram第三方包發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
1.2.添加依賴(lài)
npm init -y //初始化npm項(xiàng)目 npm install @escook/request-miniprogram
1.3.配置網(wǎng)絡(luò)請(qǐng)求
// 按需導(dǎo)入 $http 對(duì)象 import { $http } from '@escook/request-miniprogram' //配置網(wǎng)絡(luò)請(qǐng)求庫(kù) $http.baseUrl = '' // 請(qǐng)求根路徑 //請(qǐng)求攔截器 $http.beforeRequest = function (options) { // 展示loading框 uni.showLoading({ title:'數(shù)據(jù)加載中...' }) } //響應(yīng)攔截器 $http.afterRequest = function () { // 隱藏加載框 uni.hideLoading() } // 在 uni-app 項(xiàng)目中,可以把 $http 掛載到 uni 頂級(jí)對(duì)象之上,方便全局調(diào)用 uni.$http = $http
2. 小程序分包加載
2.1.介紹
分包指的是把一個(gè)完整的小程序項(xiàng)目,按照需求劃分為不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶(hù)在使用時(shí)按需進(jìn)行加載
2.2分包的好處
a.可以?xún)?yōu)化小程序首次啟動(dòng)時(shí)下載時(shí)間
b.在多團(tuán)隊(duì)共同開(kāi)發(fā)式可以更好的解藕協(xié)作
2.3.分包加載
2.3.1分包加載前后項(xiàng)目的結(jié)構(gòu)
1.分包前,小程序項(xiàng)目中所有的頁(yè)面和資源都被打包到一起,導(dǎo)致整個(gè)項(xiàng)目體積過(guò)大,影響小程序首次啟動(dòng)的下載時(shí)間
2.分包后,小程序項(xiàng)目由一個(gè)主包+多個(gè)分包組成:
主包:一般只包含項(xiàng)目的啟動(dòng)頁(yè)面或TabBar頁(yè)面,以及所有主包都需要用到的一些公共資源
分包:只包含和當(dāng)前分包有關(guān)的頁(yè)面和私有資源
2.3.2分包的加載規(guī)則
1. 在小程序啟動(dòng)時(shí),默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面
2. 當(dāng)用戶(hù)進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí),客戶(hù)端會(huì)把對(duì)應(yīng)分包下載下來(lái),下載完成后再進(jìn)行展示
注意:
非 tabBar 頁(yè)面可以按照功能的不同,劃分為不同的分包之后,進(jìn)行按需下載
2.3.3分包的體積限制
整個(gè)小程序所有分包大小不超過(guò) 20M (主包 + 所有分包)
單個(gè)分包/主包大小不能超過(guò) 2M
3.4分包的配置
3.4.1定義
1.在項(xiàng)目的根目錄中,創(chuàng)建分包的根目錄,命名為subpkg
2.在pages.json中,和pages字段平級(jí)的位置聲明subPackages數(shù)據(jù)節(jié)點(diǎn)中,用來(lái)定義分包相關(guān)的結(jié)構(gòu):
3.4.2使用
1.pages.json配置 { "subPackages": [{ "root": "subpkg", "pages": [] }], } 2.創(chuàng)建目錄subpkg 3.在subpkg目錄下頁(yè)面 4.配置頁(yè)面后會(huì)在pages.json中subPackages.pages中自動(dòng)填寫(xiě)創(chuàng)建的頁(yè)面信息
3.4.3新建分包文件
3.自定義組件使用
3.1.創(chuàng)建組件
在項(xiàng)目根目錄的 components 目錄上,鼠標(biāo)右鍵,選擇 新建組件,填寫(xiě)組件信息,最后點(diǎn)擊 創(chuàng)建 按鈕
3.2.使用
直接以標(biāo)簽的形式使用不需要引入
4.組件使用
4.1獲取頁(yè)面可用高度
const sysInfo = uni.getSystemInfoSync()
4.2數(shù)據(jù)保存到本地
uni.setStorageSync('定義參數(shù)', 保存的值) //保存 uni.getStorageSync('定義參數(shù)') // 獲取
4.3.圖片預(yù)覽功能
1.使用 // 調(diào)用 uni.previewImage() 方法預(yù)覽圖片 uni.previewImage({ // 預(yù)覽時(shí),默認(rèn)顯示圖片的索引 current: 1, // 所有圖片 url 地址的數(shù)組 urls: [] })
4.4商品導(dǎo)航組件 uni-goods-nav
地址:導(dǎo)航組件
效果
4.5.為tabBar 設(shè)置數(shù)字徽標(biāo)
// 調(diào)用 uni.setTabBarBadge() 方法,設(shè)置購(gòu)物車(chē)右上角徽標(biāo) uni.setTabBarBadge({ index: 2, //位置 text: 2 + '', // 注意:text 的值必須是字符串,不能是數(shù)字,顯示的圖標(biāo) })
效果
4.6.混入功能
1.新建一個(gè)mixins文件夾 2.文件下創(chuàng)建一個(gè).js文件 3.配置內(nèi)容 export default { computed: {}, methods: { }, data:{ return{ } } } 4.在需要的vue文件中使用 // 導(dǎo)入自己封裝的 mixin 模塊 import badgeMix from '@/mixins/xxxx.js' export default { // 將 badgeMix 混入到當(dāng)前的頁(yè)面中進(jìn)行使用 mixins: [badgeMix], // 省略其它代碼... }
4.7調(diào)用小程序的方法獲取用戶(hù)地址
// 1. 調(diào)用小程序提供的 chooseAddress() 方法,即可使用選擇收貨地址的功能 // 返回值是一個(gè)數(shù)組:第 1 項(xiàng)為錯(cuò)誤對(duì)象;第 2 項(xiàng)為成功之后的收貨地址對(duì)象 const [err, succ] = await uni.chooseAddress() // 2. 用戶(hù)成功的選擇了收貨地址 if (err === null) { // 為 data 里面的收貨地址對(duì)象賦值 this.address = succ }
4.8.NumberBox 數(shù)字輸入框
地址: 數(shù)字輸入框
效果
使用
<uni-number-box :min="1" :value="item.goods_count" :max="9" @change="numChangeHandler"></uni-number-box> 屬性 min 最小 max 最大 change 數(shù)據(jù)發(fā)生變化觸發(fā) step 一次加多少
4.9獲取微信用戶(hù)信息
// desc 為必填字段,用于聲明獲取用戶(hù)個(gè)人信息后的用途,不超過(guò)30個(gè)字符 const [err, res] = await uni.getUserProfile({desc: '完善個(gè)人資料'}) // 用戶(hù)拒絕授權(quán) if (err) return uni.$showMsg('您拒絕授權(quán)!') // 用戶(hù)同意授權(quán),保存用戶(hù)信息 console.log(res)
4.10.獲取微信登錄返回的code信息
// 調(diào)用微信登錄接口 const [err, res] = await uni.login() // 判斷微信登錄uni.login()是否調(diào)用失敗 if (err) return uni.$showMsg('微信登錄失??!') console.log(res.code) // 微信登錄返回的code
4.11.退出登錄
const [err, succ] = await uni.showModal({ title: '提示', content: '確認(rèn)退出登錄嗎?' }) if (succ && succ.confirm) { // 用戶(hù)確認(rèn)了退出登錄的操作 }
4.12.微信支付功能
// 調(diào)用 uni.requestPayment() 發(fā)起微信支付 const [err, succ] = await uni.requestPayment(payInfo)
5.解決問(wèn)題
5.1解決 .webp 格式圖片在 ios 設(shè)備上無(wú)法正常顯示的問(wèn)題
// 使用字符串的 replace() 方法,將 webp 的后綴名替換為 jpg 的后綴名 .replace(/webp/g, 'jpg')
5.2.判斷對(duì)象是否為空
JSON.stringify(對(duì)象) === '{}'
總結(jié)
到此這篇關(guān)于uni-app開(kāi)發(fā)小程序的文章就介紹到這了,更多相關(guān)uni-app開(kāi)發(fā)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程
Unity webgl嵌入到前端網(wǎng)頁(yè)中,前端通過(guò)調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2024-01-01vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問(wèn)題
這篇文章主要介紹了解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08Vue 過(guò)渡(動(dòng)畫(huà))transition組件案例詳解
這篇文章主要介紹了Vue 過(guò)渡(動(dòng)畫(huà))transition組件案例詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡
這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09