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