引言
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。
在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
下载使用uni
直接下载打开就行了 https://ext.dcloud.net.cn/plugin?id=55
npm i @dcloudio/uni-ui
在 page.json 里面添加这个 // pages.json { "easycom": { "autoscan": true, "custom": { // uni-ui 规则如下配置 "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } }, // 其他内容 pages:[ // ... ] }
<uni-badge text="1"></uni-badge> <uni-badge text="2" type="success" @click="bindClick"></uni-badge> <uni-badge text="3" type="primary" :inverted="true"></uni-badge> 使用
或者直接创建这个项目
创建项目
配置浏览器打开
找到文件所在位置
复制路径
就行了
和小程序链接
<view class="top-operate" :style="{marginTop: info.safeArea.top + 'px'}"> 得到屏幕的信息 const info = uni.getSystemInfoSync() 写好的 类 里面需要内容,否则会报错
https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1125416499&lang=zh_CN 获得小程序的id 将这个 放入到hbuiderx 里面去
数据缓存
操作浏览器
mounted() { uni.setStorage({ key:'storage_key', data:'hello,world', success: () => { console.log('success') } }) }
小程序打包
第一次打开微信开发小程序工具 需要设置打端口号
然后配置文件位置
开发管理下面有微信开发需要的Id
需要设置合法域名
配置可用的服务地址
上传
上传之后在版本管理可以查看上传的东西