【项目笔记】微信小程序的开发大致过程-----前端使用Vue技术，使用HBuilder+微信开发者工具

提示：该笔记是在前面的前端Vue+后端springboot mybatis-plus的知识基础上进行微信小程序的入门讲解

文章目录

• 前言
• 一、准备
• • 1.下载HBuilder软件、微信开发者工具
  • 2.找到微信开发ID
• 二、初步开始
• • 1.创建项目
  • 2.安装插件
  • 3.创建一个新的页面
  • • 3.1
    • 3.2使用uni-ui的扩展组件：滚动条
    • 3.3使用uni-ui的扩展组件：轮播图
    • 3.4工具类utils
    • 3.5请求后端拿到数据测试
  • 4.主页面index》vue底部设置三个按钮，每个按钮对应不同页面
  • • 4.1设置按钮图标
    • 4.2切换页面
    • 4.3图标的是否选中样式不同
• 三、源码：
• 结束语

前言

此篇笔记记录的是：使用VUE以及Springboot+mybatis-plus的技术进行微信小程序的开发，基于HBuilder软件和微信开发者工具。此篇只具体记载了前端的编写。
前两篇相关文章参考：
【项目笔记】前端Vue+Element-UI加上后端Springboot+mybatis-plus技术，完善各功能
【项目笔记】后端框架的搭建用法以及一些常用功能的实现，使用Springboot+mybatis-plus等技术

一、准备

1.下载HBuilder软件、微信开发者工具

安装好HBuilder后，将压缩包解压，点击这个即可

2.找到微信开发ID

搜索微信公众平台，点击第一个

登陆以后，选择小程序测试号，拿到APPID

复制ID至HBuilder软件和微信开发者工具


PS：如果想要从HBuilder敲完代码在微信开发者工具上编译运行的话，首先要把微信开发者工具的端口打开。
开放端口以后才能从HBuilder运行过0去。

二、初步开始

1.创建项目

取名字，vue版本选择2，版本选择默认版本

新建项目以后的基本组成构造：
和html相比较就是把div换成了view

注意：script中的onshow()是从后台跳到前台，onhide()是从前台跳到后台

2.安装插件

每创建一个项目就导入一次uni-ui
方法：在HBuilder官网点击插件市场，搜索uni-ui，第一个就是，下载导入，选择自己的项目。



导入成功后会显示：

3.创建一个新的页面

3.1

ps：所有的页面、组件都放在pages目录下，pages目录中每个目录表示一个页面目录，每个页面目录只有一个vue文件

ps：必须在pages.json文件中注册了页面才能进行跳转。pages数组第一个元素页面即为运行首页，可以自己调整顺序。

3.2使用uni-ui的扩展组件：滚动条

ps：可以手动设置滚动条文字 → 在 t e x t 属性前面加个：就将 t e x t 从属性变为变量。然后在后面的 s c r i p t 中 d a t a 中加上 n o t i c e 属性值即可。 \to在text属性前面加个：就将text从属性变为变量。然后在后面的script中data中加上notice属性值即可。 →在text属性前面加个：就将text从属性变为变量。然后在后面的script中data中加上notice属性值即可。

3.3使用uni-ui的扩展组件：轮播图

ps：静态资源比如图片统一放在static目录下

swiper为轮播图的标签，故这里使用其名字为目录，表示此目录下的图片是轮播图中所用到的。

使用vue里面的v-for循环可以从script中取得图片资源：

将src这个变量与item对象的url属性的值绑定起来


ps：index为可以返回点击的是哪一个对象、第几个对象；key可以把对象区分开来；也可以使用id，如果没有id就用index；加了冒号才能证明是变量。

3.4工具类utils

在utils封装一个request.js：可以直接赋值封装拿来使用即可

3.5请求后端拿到数据测试

api接口下的user.js文件

前端main.vue中的script中关于取数据

4.主页面index》vue底部设置三个按钮，每个按钮对应不同页面

先导入底部导航栏的插件（和导入uni-ui步骤一样）

4.1设置按钮图标

4.2切换页面

导入页面，然后注册告诉vue这为组件当成标签来用，current=1展示这个


完成跳转：其实是渲染，但是给人一种错觉是跳转
会根据current的值确定重定向到何页面组件

ps：redirectTo方法是关闭当前页面跳转到另一个页面，会重新加载onload

4.3图标的是否选中样式不同

三、源码：

insex/index.vue

Main> <message v-if="current==1">message> <personal v-if="current==2">personal> <view style="background-color: aqua;width: 100%;height: 50px;position: absolute;bottom: 0px;display: flex;justify-content:space-around;"> <uni-icons v-for="(item,index) in tabbarList" :key="index" size="50" :type="item.icon" @click="handleTabbarChange(item.index)">uni-icons> view> view> template> <script> import Main from '@/pages/main/main.vue' import message from '@/pages/message/message.vue' import personal from '@/pages/personal/personal.vue' export default { components:{ Main, message, personal }, data() { return { current:0, tabbarList:[ { title:'首页', icon:'home', active_icon:'home-filled', index:0 }, { title:'信息', icon:'refresh', active_icon:'refresh-filled', index:1 }, { title:'我的', icon:'cloud-upload', active_icon:'cloud-download-filled', index:2 } ] } }, onShow() { wx.hideHomeButton() }, onLoad() { }, methods: { handleTabbarChange(index){ this.current = index console.log(this.current); } } } script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61

main/main.vue

<template> <view> <view class=""> <view> <uni-notice-bar show-icon scrollable :text="notice" />view> view> <view class=""> <swiper circular indicator-dots="#000" autoplay interval="3000" duration="500"> <swiper-item v-for="(item,index) in swiperList" :key="index"> <image :src="item.url" style="width: 100%;">image> swiper-item> swiper> view> view> template> <script> import studentApi from '@/api/user.js' export default { data() { return { notice:'tttuni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。' ,swiperList:[ { id:1, url:'../../static/swiper/1.jpg', title:'1' }, { id:2, url:'../../static/swiper/2.jpg', title:'2' }, { id:3, url:'../../static/swiper/3.jpg', title:'3' } ] } }, onLoad() { this.selectAllStudent() }, methods: { selectAllStudent(){ studentApi.selectAllStudent().then(res =>{ console.log(res.data.items); }) } } } script> <style> style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62

request.js文件

//功能：暴露接口 let token const BASE_URL = 'http://xxx.xxx.xxx.xxx:8081' //域名或选取所有接口不变的那一部分 export default (options) => { //暴露一个function：myRequest，使用options接收页面传过来的参数 return new Promise((resolve, reject) => { //异步封装接口，使用Promise处理异步请求 uni.request({ //发送请求 url: BASE_URL + options.url, //接收请求的API method: options.method || 'GET', //接收请求的方式,如果不传默认为GET data: options.data || {}, //接收请求的data,不传默认为空 header: { 'token': token }, success: (res) => { //数据获取成功 if (res.data.data.token) { token = res.data.data.token } if (!res.data.success) { uni.showToast({ title:res.data.message, icon:"error", duration:2000 }) } resolve(res.data) //成功,将数据返回 }, fail: (err) => { //失败操作 uni.showToast({ title: "请求接口失败！" }) reject(err) } }) }) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

api/user.js文件

import request from '@/utils/request.js' const studentApi = { selectAllStudent(){ return request({ url:'/talent/student/selectAllStudent', method:'get' }) } } export default studentApi

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

---

结束语

浅浅记录一下师兄给我们讲解的vue前端以及微信小程序的最基本开发过程。