重庆网站开发公,自己0基础怎么创业,一次性筷子网站建设,工程建设标准化期刊网站uni-app 多端开发 一、命令创建uni-app 项目二、在微信小程序后台找到 appId 填写 appId三、运行项目四、使用 uni-ui4-1、下载4-2、自动导入4-3、ts项目下载类型校验 #xff08;uni-ui 组件库#xff09;4-3-1、下载4-3-2、配置 五、持久化 pinia六、数据请求封装七、获取组… uni-app 多端开发 一、命令创建uni-app 项目二、在微信小程序后台找到 appId 填写 appId三、运行项目四、使用 uni-ui4-1、下载4-2、自动导入4-3、ts项目下载类型校验 uni-ui 组件库4-3-1、下载4-3-2、配置 五、持久化 pinia六、数据请求封装七、获取组件的实例类型八、上拉加载更多 开场白 要是在 vscode 书写代码 需要添加 几个插件来支持 uni-app
一、命令创建uni-app 项目 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 二、在微信小程序后台找到 appId 填写 appId
三、运行项目
运行命令 pnpm dev:mp-weixin会生成dist 文件目录导入到微信开发者工具查看
四、使用 uni-ui
官网地址uni-app 官网 使用uni-ui
4-1、下载
npm i dcloudio/uni-ui 或 yarn add dcloudio/uni-ui4-2、自动导入
// pages.json
{// 自动导包配置easycom: {autoscan: true,custom: {// uni-ui 规则如下配置^uni-(.*): dcloudio/uni-ui/lib/uni-$1/uni-$1.vue}},// 其他内容pages:[// ...]
}4-3、ts项目下载类型校验 uni-ui 组件库 uni-helper/uni-ui-types 后面的所有的点击事件对象都可以用 UniHelper 提供的类型 swiper changeonChangeswiper-item.../swiper-itemswiper-item.../swiper-item
/swiper// js
const onChange: UniHelper.SwiperOnChange (event) {// UniHelper.SwiperOnChange 这样 event 里面的所有的类型都有了
}4-3-1、下载 pnpm i -D uni-helper/uni-ui-types 4-3-2、配置 在 tsconfig.json 文件中 compilerOptions 配置上 compilerOptions: {allowJs: true,sourceMap: true,baseUrl: .,paths: {/*: [./src/*]},lib: [esnext, dom],types: [dcloudio/types,miniprogram-api-typings,uni-helper/uni-app-types,uni-helper/uni-ui-types // 配置的uni-ui类型书写标签时鼠标划上之后有代码提示]
},五、持久化 pinia
pinia 的使用和 vue3 一样 pinia配置只是持久化的时候需要改一下
// TODO: 持久化
{persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)},},},},六、数据请求封装
utils包里面创建 http.ts 文件
// http.tsimport { useMemberStore } from /stores // store 取 tokenconst baseUrl https://pcapi-xiaotuxian-front-devtest.itheima.net// 拦截器
const httpInterceptor {// 拦截前触发invoke(options: UniApp.RequestOptions) {options.url baseUrl options.urloptions.timeout 10000options.header {...options.header,source-client: miniapp,}const memStore useMemberStore()const token memStore.profile?.tokenif (token) {options.header.Authorization token}},
}
// 添加 request 请求拦截 和 文件上传拦截
uni.addInterceptor(request, httpInterceptor)
uni.addInterceptor(uploadFile, httpInterceptor)// 封装响应
interface DataT {code: stringmessage: stringresult: T
}
export const http T(options: UniApp.RequestOptions) { // http 函数接受 泛型T由调用 http 函数地方传进来return new PromiseDataT((resolve, reject) { // Promise 响应数据进行泛型约束Data 在上面定义好了只有 result 类型会变化所以从 http 函数调用者传进来uni.request({...options,success(response) {if (response.statusCode 200 response.statusCode 300) {resolve(response.data as DataT)} else {uni.showToast({ icon: none, title: 请求错误 })reject(response)}},fail(err) {uni.showToast({ icon: none, title: 服务器异常 })reject(err)},})})
}
在 api / index.ts 目录下
import { http } from /utils/http/*** 首页轮播图* param distributionSite 区分首页还是分类页面* returns promise*/
export const getHomeBannerAPI (data: Banner ) {return httpBannerItem[]({url: /home/banner,method: GET,data})
}
在组件中正常使用就好了
七、获取组件的实例类型
Son refsonComponent /const sonComponent refInstanceTypetypeof Son() // typeof xxx 组件类型 InstanceType 获取的是实例类型sonComponent.value.getMore // 父组件拿到子组件的属性和方法子组件需要暴露出来vue3中
defineExpose({getMore: getGuessData // 前面定义的名字让父组件拿到 后面是子组件中的属性和方法
})八、上拉加载更多
// 分页参数
const params {currrentPage: 1,pageSize: 10
}
// 定义的数组
const tableDataList ref([])
// 是否加载完数据
const isFinish ref(false)
// 加载中状态
let isLoading false
// 页面和加载更多方法
const getDataList async (params) {if(isLoading || isFinish.value) return // 加载中或者数据没有加载完 都不进行请求数据isLoading true // 请求数据制成 trueconst res await API(params)tableDataList.value [...tableDataList.value, res.result.list] // 数据拼接isLoading false // 数据回来加载中的状态制成 false// 判断要是当前的页码大于等于列表数据的总页码停止加载数据加载完了if(params.currentPage res.result.pages) {isFinish.value true // 数据加载完了return uni.showToast({title: 数据加载完了 icon: none})}params.currentPage // 加载下一页的数据
}
