亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

uni-app開發(fā)小程序的完整流程記錄

 更新時間:2024年11月04日 10:30:43   作者:&小胖&  
本文詳細介紹了使用uni-app進行項目開發(fā)的全過程,包括uni-app框架的介紹、開發(fā)工具HBuilderX的下載安裝與配置、項目開發(fā)中的網(wǎng)絡請求配置、小程序分包加載、自定義組件使用、組件使用技巧等,還提及了解決開發(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之Axios的異步通信詳解

    Vue之Axios的異步通信詳解

    這篇文章主要為大家詳細介紹了Vue之Axios的異步通信,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • 詳解Unity webgl 嵌入Vue實現(xiàn)過程

    詳解Unity webgl 嵌入Vue實現(xiàn)過程

    Unity webgl嵌入到前端網(wǎng)頁中,前端通過調(diào)用Unity webgl內(nèi)方法實現(xiàn)需要展示的功能,前端點擊Unity webgl內(nèi)的交互點,Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實現(xiàn)過程,需要的朋友可以參考下
    2024-01-01
  • vue關(guān)于eslint空格縮進等的報錯問題及解決

    vue關(guān)于eslint空格縮進等的報錯問題及解決

    這篇文章主要介紹了vue關(guān)于eslint空格縮進等的報錯問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue中使用vux的配置詳解

    Vue中使用vux的配置詳解

    這篇文章主要為大家詳細介紹了Vue中使用vux配置的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 解決Vue-Router升級導致的Uncaught (in promise)問題

    解決Vue-Router升級導致的Uncaught (in promise)問題

    這篇文章主要介紹了解決Vue-Router升級導致的Uncaught (in promise)問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue 過渡(動畫)transition組件案例詳解

    Vue 過渡(動畫)transition組件案例詳解

    這篇文章主要介紹了Vue 過渡(動畫)transition組件案例詳解,非常不錯,具有參考借鑒價值,需要的朋友參考下
    2017-01-01
  • React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function的解決

    React/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 多個元素嵌套使用過渡

    這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue+Element UI實現(xiàn)下拉菜單的封裝

    Vue+Element UI實現(xiàn)下拉菜單的封裝

    這篇文章主要為大家詳細介紹了Vue+Element UI實現(xiàn)下拉菜單的封裝代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue 獲取數(shù)組鍵名的方法

    Vue 獲取數(shù)組鍵名的方法

    本篇文章主要介紹了Vue 獲取數(shù)組鍵名的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論