uniapp笔记

UniApp 笔记

简介

UniApp是一款基于Vue.js框架的跨平台开发框架，可将一个Vue项目编译成各种平台的应用程序，如微信小程序、H5、App等。

UniApp具有以下特点：

基于Vue.js开发，上手容易
支持跨平台编译，一次编写，多端运行
支持原生组件和API调用
内置丰富的组件和插件，开箱即用

安装和使用

安装Node.js和Vue CLI：

# 安装Node.js 注意这是mac的安装方式windows可直接下载安装包安装
brew install node

# 安装Vue CLI 
npm install -g @vue/cli

创建UniApp项目：

# 创建UniApp项目
vue create -p dcloudio/uni-preset-vue my-project

# 进入项目目录
cd my-project

运行项目：

# 运行微信小程序
npm run dev:mp-weixin

# 运行H5
npm run dev:h5

# 运行App
npm run dev:app-plus

常用插件

uni-ui

uni-ui是UniApp官方提供的UI组件库，包含各种常用组件，如按钮、表单、列表、卡片等。使用uni-ui可以快速构建漂亮的界面。

安装：

npm install @dcloudio/uni-ui

使用：

<template>
  <uni-button>按钮</uni-button>
</template>

<script>
import UniButton from '@dcloudio/uni-ui/lib/uni-button.vue'

export default {
  components: {
    UniButton
  }
}
</script>

uni-icons

uni-icons是UniApp官方提供的图标库，包含各种常用图标，如箭头、社交媒体图标、工具图标等。使用uni-icons可以快速添加图标。

安装：

npm install uni-icons

使用：

<template>
  <uni-icon name="arrow-left"></uni-icon>
</template>

<script>
import UniIcon from 'uni-icons'

export default {
  components: {
    UniIcon
  }
}
</script>

示例代码

页面结构

<template>
  <view class="container">
    <view class="header">
      <text class="title">Hello UniApp</text>
    </view>
    <view class="content">
      <image class="logo" src="~/assets/logo.png"></image>
      <uni-button class="button" @click="handleClick">点击按钮</uni-button>
    </view>
    <view class="footer">
      <text class="copyright">Copyright © 2023 
        <a class="link" href="https://example.com">Example Inc.</a>
      </text>
    </view>
  </view>
</template>

<script>
import UniButton from '@dcloudio/uni-ui/lib/uni-button.vue'

export default {
  components: {
    UniButton
    },
 methods: {
 handleClick() {
 console.log('点击了按钮')
  }
 }
}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.header {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: bold;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo {
  width: 128px;
  height: 128px;
  margin-bottom: 16px;
}
.button {
  margin-top: 16px;
}
.footer {
  margin-top: 16px;
  font-size: 12px;
  color: #999;
}
.link {
  color: #999;
}
</style>

API调用

<template>
  <view class="container">
    <view class="header">
      <text class="title">获取地理位置</text>
    </view>
    <view class="content">
      <view v-if="!loading && !error" class="result">
        <text>经度：{{ longitude }}</text>
        <text>纬度：{{ latitude }}</text>
      </view>
      <uni-button v-if="!loading && !error" class="button" @click="getLocation">
        获取位置
      </uni-button>
      <uni-loadmore v-if="loading" :loading="loading">
        正在获取位置...
      </uni-loadmore>
      <uni-notice-bar v-if="error" type="error">
        获取位置失败：{{ error }}
      </uni-notice-bar>
    </view>
  </view>
</template>

<script>
import UniButton from '@dcloudio/uni-ui/lib/uni-button.vue'
import UniLoadmore from '@dcloudio/uni-ui/lib/uni-loadmore.vue'
import UniNoticeBar from '@dcloudio/uni-ui/lib/uni-notice-bar.vue'

export default {
  components: {
    UniButton,
    UniLoadmore,
    UniNoticeBar
  },
  data() {
    return {
      loading: false,
      error: null,
      longitude: null,
      latitude: null
    }
  },
  methods: {
    getLocation() {
      this.loading = true
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.loading = false
          this.error = null
        },
        fail: err => {
          this.loading = false
          this.error = err.errMsg
        }
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.header {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: bold;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.result {
  margin-bottom: 16px;
  font-size: 16px;
  text-align: center;
}

.button {
  margin-top: 16px;
}

</style>

打包成web端

在HBuilderX的工具栏中选择“发行”，然后选择“发行为网站”，在弹出的对话框中填写相关信息后，即可生成Web端的代码包。
将生成的代码包上传到服务器上，访问该服务器的地址即可使用Web端应用。
注意:可使用官方提供的证书，也可自己生成

打包成微信小程序

注意：微信小程序对大小有限制，尽量图片等静态资源使用外部链接，还有认证比较麻烦

打包成微信小程序的具体步骤如下：

在HBuilderX中打开UniApp项目，确保项目已经完成了开发和测试。
在项目根目录下找到manifest.json文件，打开并填写appid和setting参数，如下所示：
```
{
  "appid": "your-appid",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": true,
    "newFeature": true
  }
}
```
其中，appid为小程序的唯一标识符，需要在微信公众平台申请；setting参数用于配置小程序的一些特性，如是否使用ES6、是否压缩代码等。
在HBuilderX的工具栏中选择“发行”，然后选择“发行为微信小程序”。
在弹出的对话框中，填写微信小程序的相关信息，如小程序名称、图标、描述等。
点击“生成”按钮，等待生成小程序的代码包。
生成成功后，会在dist/dev或dist/prod目录下生成一个wx文件夹，其中包含小程序的代码。
打开微信开发者工具，选择“小程序项目”，然后选择“导入项目”，选择刚才生成的wx文件夹，即可在微信开发者工具中预览和调试小程序。
在微信开发者工具中完成调试后，可以选择“上传代码”，上传小程序的代码和配置信息，即可将小程序发布到微信小程序平台上。

posted @ 2022-01-12 17:53 runrab 阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

runrab

enjoy your life