uniapp开发小程序的经验总结

Uniapp开发小程序经验总结

简介

Uniapp 是一种跨平台开发框架，可以使用 Vue.js 语法来实现开发，一份代码可以同时编译为小程序、H5、APP 等多种平台。本文将讲解在 Uniapp 开发小程序时的经验总结。

项目初始化

在创建好项目后，首先需要在 manifest.json 文件中进行配置，包括 appid、sitemapLocation、permission 等。

其中，appid 即为小程序的唯一标识符，在开发阶段可以写填写任意字符，正式上线前需要在微信公众平台注册后获取真实的 appid，并替换掉开发时的临时值。

{
  "appid": "wx1234567890123456",
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

通用组件

在开发过程中，使用通用组件能够提高代码复用率和可维护性，是一种很好的开发习惯。

<!-- 在 components 目录下创建自定义组件 NavBar.vue -->
<template>
  <view class="nav">
    <view class="nav-left" @click="onLeftClick">
      <slot name="left"></slot>
    </view>
    <view class="nav-title">{{ title }}</view>
    <view class="nav-right" @click="onRightClick">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  methods: {
    onLeftClick() {
      this.$emit('left-click')
    },
    onRightClick() {
      this.$emit('right-click')
    }
  }
}
</script>

<style scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64rpx;
  background-color: #ffffff;
  color: #333333;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
}
</style>

使用时，只需要在父组件的模板中引用即可。

<!-- 在 pages/index 页面中引用自定义组件 -->
<template>
  <view class="home">
    <NavBar title="首页" @left-click="onLeftClick" @right-click="onRightClick">
      <template v-slot:left>
        <image src="/static/logo.png" class="logo"></image> 
      </template>
      <template v-slot:right>
        <text>搜索</text>
      </template>
    </NavBar>
    <!-- 其他页面内容... -->
  </view>
</template>

<script>
import NavBar from '@/components/NavBar'

export default {
  components: {
    NavBar
  },
  methods: {
    onLeftClick() {
      // 左侧按钮点击事件
    },
    onRightClick() {
      // 右侧按钮点击事件
    }
  }
}
</script>

<style scoped>
.home {
  height: 100vh;
  background-color: #f5f5f5;
}

.logo {
  display: block;
  width: 64rpx;
  height: 64rpx;
}
</style>

云开发

Uniapp 对云开发的支持非常良好，可以快速搭建小程序的后端服务和数据存储系统。

初始化云开发

在 main.js 文件中，将小程序的环境 ID 传入 uniCloud.init 方法中，即可初始化云开发。

import Vue from 'vue'
import App from './App'

import uniCloud from '@/uniCloud'

Vue.config.productionTip = false

App.mpType = 'app'

uniCloud.init({
  env: 'your-env-id' // 云环境 ID
})

const app = new Vue({
  ...App
})
app.$mount()

云函数

在 cloudfunctions 目录下创建新的云函数。

// 云函数的入口文件 index.js
const cloud = require('wx-server-sdk')

cloud.init()

exports.main = async (event, context) => {
  const { a, b } = event
  return {
    sum: a + b
  }
}

在客户端调用云函数。

<template>
  <view class="home">
    <button type="primary" @click="onButtonClick">计算 1 + 1</button>
    <text v-if="result">{{ result }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: null
    }
  },
  methods: {
    async onButtonClick() {
      try {
        const res = await uniCloud.callFunction({
          name: 'sum',
          data: {
            a: 1,
            b: 1
          }
        })
        this.result = res.result.sum
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

数据库

在客户端操作云数据库。

<template>
  <view class="home">
    <form @submit.prevent="onSubmit">
      <input type="text" placeholder="请输入姓名" v-model="name">
      <input type="number" placeholder="请输入年龄" v-model.number="age">
      <button type="primary" :disabled="!name || !age">提交</button>
    </form>
    <ul>
      <li v-for="item in list" :key="item._id">
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: null,
      list: [] // 数据库中的数据列表
    }
  },
  async created() {
    try {
      const db = uniCloud.database()
      const { data } = await db.collection('users').get()
      this.list = data
    } catch (e) {
      console.error(e)
    }
  },
  methods: {
    async onSubmit() {
      try {
        const db = uniCloud.database()
        await db.collection('users').add({
          name: this.name,
          age: this.age
        })
        const { data } = await db.collection('users').get()
        this.list = data
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

结论

通过以上学习和实践，可以看出 Uniapp 在小程序开发方面的一些优点，如编写通用组件、使用云开发等。这些经验本着代码简洁、易于维护、性能优化的原则，可以提高开发效率和用户体验。

参考

1. Uniapp 官方文档
2. 小程序开发文档