随着移动互联网的高速发展,小程序成为了新时代的移动应用开发方式。目前市场上各种开发工具层出不穷,这里我们提供了一种使用Uniapp来进行小程序开发的方式。Uniapp是一个基于Vue.js框架的多端应用快速开发框架,支持封装一份代码,同时生成iOS、Android、H5、小程序等多个平台。
一、快速入门
新建一个Uniapp项目,选择小程序为目标平台。运行项目后,可以在项目目录中找到生成的dist文件夹,里面是生成的小程序代码。
在这里我们提供一份简单的小程序示例代码:
// pages/index/index.vue <template> <view class="container"> <text>{{ message }}</text> </view> </template> <script> export default { data() { return { message: 'Hello Uniapp!' } } } </script> <style> .container { width: 100%; text-align: center; font-size: 36rpx; margin-top: 200rpx; } </style>
这是一个非常简单的小程序页面,主要包含了一个文本框,输出了一段hello world的字符串。可以运行命令npm run build:mp-weixin将代码构建成小程序代码。然后打开微信开发者工具,导入生成的dist文件夹,即可在模拟器中看到输出的hello world文本。
二、页面跳转
在小程序中,页面跳转是非常常见的操作。在Uniapp中,可以使用Vue Router来实现页面跳转。下面是一个简单的示例:
// 配置路由 // router.js import Vue from 'vue' import Router from 'uni-simple-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'index', component: '@/pages/index/index' }, { path: '/about', name: 'about', component: '@/pages/about/about' } ] }) export default router // 跳转页面 <template> <view> <button @click="toAbout">跳转到About页面</button> </view> </template> <script> export default { methods: { toAbout() { uni.navigateTo({ url: '/pages/about/about' }) } } } </script>
使用Vue Router来配置路由,使用uni.navigateTo方法来跳转到About页面。需要注意的是,在uni-app中,使用类Vue-router方式进行跳转,不同于微信小程序。
三、网络请求
小程序中,数据请求是非常常见的操作。Uniapp中可以使用uni.request进行网络请求,下面是一个简单的示例:
<script> export default { methods: { async getData() { try { const res = await uni.request({ url: 'https://xxx.com/api/data' }) console.log(res) } catch (err) { console.error(err) } } } } </script>
在使用uni.request时,我们使用ES6的async/await进行异步处理。使用try/catch来捕获异常情况,防止程序出错。而url字段中,我们填写了一个示例的api地址,需要根据实际情况进行填写。
四、组件开发
组件是小程序开发中的核心,Uniapp中也支持使用组件进行开发。组件分为全局组件和局部组件,全局组件可以在任意页面中使用,局部组件只能在当前页面中使用。下面是一个简单的全局组件示例:
// 组件代码 <template> <view> <slot> </view> </template> <script> export default { name: 'my-component' } </script> // 页面代码 <template> <view> <my-component>这是一段插槽内容</my-component> </view> </template> <script> import MyComponent from '@/components/my-component' export default { components: { MyComponent } } </script>
这是一个非常简单的插槽组件,页面中引入组件,使用组件时,插入内容会替换掉slot标签。在组件内部,仅仅使用了一个slot标签,表示插槽位置。需要注意的是,组件文件命名、引用、注册都需要按照相同的约定规则,以保证组件正常使用。