文章目錄

• • 一、uni-app
  • • 1、簡介
    • 2、開發工具
    • 3、新建 uni-app項目
    • 4、把項目運行到微信開發者工具
  • 二、實現tabBar效果
  • • 1、創建tabBar頁面
    • 2、配置tabBar
  • 三、配置網絡請求
  • • 1、依照官網提示安裝、導入、使用
    • 2、實戰
  • 四、uni-app 里面小程序分包
  • • 1、創建分包目錄
    • 2、在 pages.json 文件中配置
    • 3、創建分包頁面
  • 五、公用方法封裝
  • 六、搜索功能
  • • 1、搜索組件
    • 2、搜索建議實現
    • 3、本地存儲
    • 4、過濾器
  • 七、上拉加載、下拉刷新
  • • 1、上拉加載
    • 2、下拉刷新
  • 八、配置 vuex
  • • 1、創建文件
    • 2、初始化store
    • 3、main.js 中引入
    • 4、新建模塊
    • 5、使用
  • 九、登錄
  • • 1、獲取用戶基本信息
    • 2、獲取用戶登錄憑證 code
  • 10、支付
  • • 1、請求頭添加 token
    • 2、微信支付流程
  • 十一、發布
  • • 1、發布為小程序
    • 2、發布為安卓APP
  • 其他

一、uni-app

官網：https://uniapp.dcloud.io/

1、簡介

uni-app 是一個使用 Vue.js (opens new window) 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺；

2、開發工具

uni-app 推薦使用 Hbuilderx 開發工具來開發項目，下載地址：https://www.dcloud.io/hbuilderx.html，下載 App開發版；

1、安裝 sass 插件
點擊 工具 => 插件安裝 => 安裝新插件 => 前往插件市場安裝 ，在這里你可以搜索自己需要的插件，我們以 sass 為例；找到需要的插件之后點擊下載 => 使用Hbuilderx 導入插件，這里需要登錄 sass 的網站，如果登錄成功則會打開 Hbuilderx 編譯器，然后點擊確定就可以安裝了；

3、新建 uni-app項目

Hbuilderx 點擊 文件=>新增=>項目 ，本文新建一個小程序項目：uni-app => 填寫項目名稱、選擇項目存放路徑 => 模板 uni-ui 項目=>創建，然后就可以生成一個小程序項目；

components：組件文件
pages：頁面文件
static：靜態文件
uni_modules：依賴包
App.vue：應用配置，配置小程序全局樣式、生命周期
main.js：Vue 初始化入口文件
manifest.json：配置應用名稱 appid、logo、版本等打包信息
pages.json：配置頁面路徑、頁面樣式、tabBar等信息
uni,scss：全局樣式

4、把項目運行到微信開發者工具

1、配置 appid
在 manifest.json 文件 => 微信小程序配置 填寫微信小程序 appID；

2、在 Hbuilderx 配置微信開發者工具的安裝路徑：這樣可以在 Hbuilderx 里面運行的時候自動打開微信開發者工具查看項目
工具 => 設置 => 運行配置 => 小程序運行配置 配置微信開發者工具的安裝路徑，如：C:\Program Files (x86)\Tencent\微信web開發者工具

3、在微信開發者工具開啟服務端口
設置 => 安全設置 => 安全 開啟服務端口

4、運行
Hbuilderx 點擊 運行=>運行到小程序模擬器 點擊第一個就可以在 Hbuilderx 自動編譯，成功之后會自動打開微信開發者工具；

注意：這個時候我們想修改項目里面的內容，需要在 Hbuilderx 里面修改，例如修改配置：manifest.json 文件 => 源碼視圖

二、實現tabBar效果

1、創建tabBar頁面

在 pages 下面創建，右鍵新建頁面，這里創建的是 tanBar 對應的幾個頁面；記住這里要勾選"創建同名目錄、在pages.json 中注冊"兩個選項，默認是選中的；（home、cate、cart、my）

2、配置tabBar

在 pages.json 文件中在 pages 平級新增 tabBar 的配置：

"tabBar":{"selectedColor":"#C00000","list":[{"pagePath":"pages/home/home","text":"首頁","iconPath":"static/c1.png","selectedIconPath":"static/c2.png"},{"pagePath":"pages/cate/cate","text":"分類","iconPath":"static/c3.png","selectedIconPath":"static/c4.png"},{"pagePath":"pages/cart/cart","text":"購物車","iconPath":"static/c5.png","selectedIconPath":"static/c6.png"},{"pagePath":"pages/my/my","text":"我的","iconPath":"static/c7.png","selectedIconPath":"static/c8.png"}] }

注意：home 也必須在 pages 數組的第一位；還可以在 pages.json 文件修改 globalStyle 配置項，來自定義自己的導航條樣式；

三、配置網絡請求

由于小程序不支持 axios ，并且原生的 wx.request() API 功能比較簡單，且不支持攔截器等全局定制的功能；所以建議在 uni-app 項目中使用 @escook/request-miniprogram 第三方包發起網絡請求；

官網：https://www.npmjs.com/package/@escook/request-miniprogram

1、依照官網提示安裝、導入、使用

//引入網絡請求 import { $http } from '@escook/request-miniprogram'; uni.$http = $http; //全局baseUrl $http.baseURL = "https://www.uinav.com"; //請求攔截器 $http.beforeRequest = function (options) {uni.showLoading({title:"數據加載中..."}) } //相應攔截器 $http.afterRequest = function () {uni.hideLoading() }

在 uni-app 中可以使用 uni.xxx 來調用 wx.xxx 的 api；

2、實戰

//home data() {return {swiperList:[]}; }, onLoad() {this.getSwiperList(); }, methods:{async getSwiperList(){let { data:res } = await uni.$http.get('接口地址')if(res.meta.status !== 200){return uni.showToast({title:"數據請求失敗",duration:1500,icon:"none"})}this.swiperList = res.message;} }

四、uni-app 里面小程序分包

1、創建分包目錄

在根目錄下創建分包目錄，subpackage；

2、在 pages.json 文件中配置

在 pages 節點同級，聲明 subpackages 節點用來配置分包結構；

"subPackages":[{"root":"subpackage","pages":[]} ]

3、創建分包頁面

在 sunpackage 目錄上右鍵點擊新建文件，填寫頁面名稱、選擇分包 sunpackage ，然后創建就可以了，編譯器會自動在代碼中將配置信息填充到 sunpackage 分包下面；

"subPackages":[{"root":"subpackage","pages":[{"path" : "goods_detail/goods_detail","style" :{"navigationBarTitleText": "","enablePullDownRefresh": false}}]}]

注意：這里提一下，頁面跳轉傳參跟小程序原生跳轉傳參是一樣的：1、navigator 配合 url 跳轉、路徑拼接傳參；2、點擊事件通過 uni.redirectTo ；

五、公用方法封裝

這里以 錯誤提示信息為例，在 main.js 中；

uni.$showMsg = function(titie="請求失敗",duration=1000){uni.showToast({title,duration,icon:"none"}) }

六、搜索功能

1、搜索組件

1、自定義搜索組件：在 components 文件夾右鍵，選擇 新建組件 ，在這里可以編寫組件的內容；

2、小程序自定義組件自定義事件：由于小程序提供的組件已經幫助我們封裝了 click 事件，所以我們可以直接使用，但是我們自定義的組件沒有封裝所以不能直接在自定義的組件上使用 click 事件；

我們可以在父組件綁定一個自定義事件，然后子組件綁定 click 事件，在觸發 click 的時候通過 $emit 來觸發父組件綁定的自定義事件，這樣就可以完成自定義組件的事件傳遞；

3、吸頂：主要是利用 position:sticky ,把組件定位到頁面的頂部；

最后使用組件：直接在頁面使用就可以了，組件名是自定義組件的文件名稱；

//自定義組件 <template><view class="my-search-container" :style="{'background-color':bgColor}"><view class="my-search-box" :style="{'border-radius':radius}"><uni-icons type="search" size="18"></uni-icons><text class="placeholder">搜索</text></view></view> </template> <script>export default {name:"my-search",props:{bgColor:{type:String,default:"#c00000"},radius:{type:String,default:"18px"}},methods:{//通過 $emit 來觸發父組件上綁定的自定義事件searchEvent(){this.$emit('myclick')}}} </script> <style lang="scss"> .my-search-container{height: 50px;// background-color: #c00000;display:flex;align-items: center;padding: 0 10px;.my-search-box{height: 36px;background-color: #FFF;// border-radius: 18px;width: 100%;display: flex;justify-content: center;align-items: center;.placeholder{font-size: 15px;margin-left: 5px;}} } </style> //父組件 <template><view><view class="suckTop"><my-search @myclick="goSearch" :radius="'0px'" :bgColor="'pink'"></my-search></view></view> </template> <script>export default {methods:{goSearch(){uni.navigateTo({url:"/subpackage/search/search"})}}} </script> <style lang="scss"> .suckTop{position: sticky;top: 0;z-index: 999; } </style>

2、搜索建議實現

<template><view><view class="suckTop"><uni-search-bar @input="input" :radius="18" :focus="true" cancelButton="none"></uni-search-bar></view></view> </template> <script>export default {data() {return {timer:null,kw:''}},methods: {//輸入框事件input(e){clearTimeout(this.timer)this.timer = setTimeout(_=>{this.kw = e.value;},500)}，}} </script> <style lang="scss"> .suckTop{position: sticky;top: 0;z-index: 999;.uni-searchbar {background-color: #c00000} } </style>

使用 uni-app 提供的組件，添加 focus 讓界面自動鎖定輸入框， input 事件添加節流，然后就可以在節流方法里面調用接口來獲取并渲染搜索出來的結果；

3、本地存儲

//存 uni.setStorageSync('kw',JSON.stringify(this.kw));//onLoad 聲明周期中 取 let list = JSON.parse(uni.getStorageSync('kw') || '');//刪除 uni.setStorageSync('kw',[]);

4、過濾器

跟 data 平級聲明 filters

filters:{toFixed(num){return Number(num).toFixed(2);} }

使用的時候直接在界面上

<view>{{num | toFixed}}</view>

七、上拉加載、下拉刷新

1、上拉加載

在 pages.json 中找到當前頁面在 pages 數組中的路徑，在 style 中新增 onReachBottomDistance 設置為 150；

在頁面中 methods 平級聲明一個 onReachBottom 方法來監聽頁面上拉事件；

data() {return {isLoading:false}; }, methods:{getList(){//打開節流閥this.isLoading = true;//獲取數據let res = .....//關閉節流閥this.isLoading = false;} }, //監聽上拉事件 onReachBottom() {//沒有更多數據if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('沒有更多數據了')//限流 防止頻繁請求if(this.isLoading) return;//頁面自增加一this.pagenum++;//獲取列表數據的方法this.getList(); }

2、下拉刷新

在 pages.json 中找到當前頁面在 pages 數組中的路徑，在 style 中新增 enablePullDownRefresh設置為 true；

在頁面中 methods 平級聲明一個 onPullDownRefresh方法來監聽頁面上拉事件；

methods:{getList(cb){//打開節流閥this.isLoading = true;//調用回調函數cb && cb();//獲取數據let res = .....//關閉節流閥this.isLoading = false;} }, onPullDownRefresh() {this.total = 0;this.pagenum = 1;this.list = [];this.isLoading = false;//傳入回調函數，停止下拉刷新效果this.getList(()=> uni.stopPullDownRefresh()); }

八、配置 vuex

1、創建文件

根目錄創建文件夾 store，在文件夾下創建文件 store.js ;

2、初始化store

//store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); import cart from '@/store/cart.js' const store = new Vuex.Store({modules:{cart} }) export default store;

3、main.js 中引入

//main.js import store from './store/store.js' const app = new Vue({...App,//掛載到vue實例上store }) app.$mount()

4、新建模塊

新建一個 cart 模塊的 js 文件，然后在 store.js 里面引入；

//cart.js export default {namespaced:true,state:{cart:[]},//修改state 只能通過 mutations mutations:{addCart:(state,data)=>{state.cartList.push(data)}},getter:{} }

5、使用

import { mapState, mapActions, mapMutations } from 'vuex';computed:{...mapState({cartList:state=>state.cart.cartList}) }, methods: {...mapMutations(['addCart']),addCartInfo(){this.addCart(2)// this.$store.commit('addCart',2)},//輸入框事件input(e){clearTimeout(this.timer)this.timer = setTimeout(_=>{this.kw = e.value;},500)}}

九、登錄

在調用登錄接口之前，我們需要先獲取用戶的基本信息以及 code，作為參數；

1、獲取用戶基本信息

<button open-type="getUserInfo" @getuserinfo="getInfo">一鍵登錄</button> methods:{//自定義方法getInfo(e){console.log(e)} }

這里直接使用 button 組件提供的 open-type 等于 getUserInfo ，并配合 @getuserinfo 事件綁定的方法中獲取到用戶信息；這里是固定寫法；參考官網：https://uniapp.dcloud.io/component/button.html

2、獲取用戶登錄憑證 code

這個可以直接調用 uni.login() API ；

async getCode(){let [err,res] = await uni.login().catch(err=>err)console.log(res) }

10、支付

1、請求頭添加 token

只有登錄成功之后才能調用支付相關的接口，我們需要將登錄后獲取的 token 設置在有權限的接口請求字段里；一般在請求攔截里面為接口統一配置 header；

$http.beforeRequest = function (options) {uni.showLoading({title:"數據加載中..."})options.header = {Authorization: token} }

2、微信支付流程

1、創建訂單
將訂單信息提交給后臺服務器，創建訂單，獲取訂單號；
2、訂單預支付
將訂單號發送給后臺服務器，獲取到支付相關的參數；
3、調用微信支付
調用 uni.requestPayment(OBJECT) API，發起支付請求；通過 fail、 success 回調函數監聽支付是否成功，然后調取后臺接口將支付狀態同步給數據庫；

十一、發布

小程序只有在發布后才能夠被用戶檢索使用，開發期間為了便于調試，小程序會攜帶 sourcemap 等類型的文件，并且代碼沒有進行壓縮因此體積比較大，所以需要壓縮發布；

1、發布為小程序

1、點擊 hbuilderx 工具欄 發行 => 小程序-微信，這時候會有一個彈出框，需要填寫小程序的名稱和 AppID；
2、點擊發行按鈕，hbuilderx 的控制臺就會顯示打包編譯進度；
3、編譯成功之后會自動發開微信開發者工具，這時候點擊上傳按鈕；
4、然后會彈出一些提示信息，點擊確定，彈出 版本號、項目備注彈窗，點擊上傳就可以了；
5、然后微信小程序后臺審核上線就可以了；

2、發布為安卓APP

1、點擊 hbuilderx 左下角未登錄，進行賬號登錄；
2、登錄之后點擊項目的 manifest.js 文件，基礎配置里面，填寫 uni-app 的 AppID 、應用名稱、描述、版本等；
3、App圖標配置，預覽選擇圖片，然后自動生成配置；
4、點擊 hbuilderx 工具欄 發行 => 原生App-云打包，然后彈出彈窗，選擇 安卓apk包，ios需要先購買開發者身份才能打包，使用公共的測試證書，勾選打正式包，然后點擊打包；
5、然后在 hbuilderx 控制臺顯示打包進度，成功之后會返回一個下載地址的連接，點擊連接就可以下載 apk 的安裝包，這個 apk 包就可以在安卓系統上安裝查看了；

其他

下面是一些比較常見的組件、API、問題：
1、API：uni.previewImage(OBJECT)
預覽圖片，可以將輪播圖方法查看；
2、API：uni.chooseAddress(OBJECT)
獲取用戶收貨地址。調起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址，需要用戶授權 scope.address；
3、組件：rich-text
渲染富文本；
4、組件：uni-goods-nav
商品加入購物車，立即購買組件；
5、問題：.webp 后綴圖片在 ios 不展示問題
ios 上圖片 .webp 格式支持不怎么友好，可以只要正則表達式將圖片后綴名替換成 .jpg ;
6、問題：商品價格閃爍問題
數據在請求到頁面之前， data 里面的數據初始為 {} ，因此初次渲染會導致一些數據閃爍，可以先利用 v-if 判斷這個數據是否存在，來控制整體界面的顯示隱藏；
7、問題：收獲地址授權失敗問題
判斷是否是授權失敗問題，是則直接調用 uni.openSetting(OBJECT) API 開啟地址權限；注意兼容 ios 和 安卓；

總結

以上是生活随笔為你收集整理的微信小程序 - 使用 uni-app 开发小程序以及部分功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。