微信小程序-JAVA Springboot项目-小程序搭建-项目搭建01

目次
一、序言
二、小程序搭建

---

一、序言

        本文主要报告一个微信小程序前后端项目搭建的过程，主要内容包括小程序（前端）搭建和后端搭建，此中会描述可能遇到的问题以及解决步伐，文章将会分为几个部门进行报告，这章将报告前端小程序搭建的内容，此中包括软件下载、客户端向服务端发送数据，吸取并处置处罚来自服务端的数据等内容；本项目的前端运用的框架是uni-app，后端运用的框架是Springboot，如各位需求满足，可继续往下看；
        关于前后端分离的利益，个人认为是可以增加代码可维护性，降低了很多后期维护本钱，更容易发现问题，解决问题；其次项目可以分工给团队，减少开辟难度。对于新手或者想要独立完成一个总体项目的同志是个不错的练习。
二、小程序搭建

1、开辟语言
        本项目运用的框架是uni-app，uni-app是一个使用 Vue.js 开辟所有前端应用的框架，该框架的开辟语言类似于vue.js，语法的规则有些变化（具体变化查看以下链接）；
白话uni-app | uni-app官网 (dcloud.net.cn)

https://uniapp.dcloud.net.cn/vernacular.html#         vue建立在尺度 HTML、CSS 和 JavaScript 之上，以是涉及的开辟语言要了解：vue、CSS、JavaScript、HTML；如果是新手莫张皇，语法较简单，看一看例子就能简单上手，以下是uni-app官方的教程链接；
        常使用的主要三个语言板块：html、css、javascript，查看此中的一些格式变化即可。
uni-app构成和跨端原理 | uni-app官网 (dcloud.net.cn)

https://uniapp.dcloud.net.cn/tutorial/
2、开辟工具

• HBuilderX（下载地址如下）
  

HBuilderX-高效极客本事 (dcloud.io)

https://www.dcloud.io/hbuilderx.html

• 微信开辟者工具（下载地址如下）
  

微信开辟者工具下载地址与更新日志 | 微信开放文档 (qq.com)

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html        下载稳固版本即可

3、平台注册或登录，获取小程序APPID
微信公众平台 (qq.com)

https://mp.weixin.qq.com/        小程序开辟必要APPID才能发布或发行，这个步骤必要进入平台，注册登录后，填写小程序信息，然后获取APPID即可；
4、创建uni-app项目（这部门属于项目的前端部门）

        选择uni-app项目，选择默认版本，vue选择版本2即可，如果选择vue3，那么根据官方教程学习即可；本项目选择的是vue2；
        创建后项目的目次如图所示：

5、编写项目
        这里编写一个小demo，实现前端接口向后端传输数据，以及吸取后端传来的数据；
         打开index页面，编写代码：

1. <template>
2.         <view class="content">
3.                 <image class="logo" src="/static/logo.png"></image>
4.                 <view class="text-area">
5.                         <text class="title">名称：{{title}}</text>
6.                 </view>
7.                 <input class="input-box" placeholder="请输入修改的名称" @input="setTitle" />
8.                 <button @click="postData"> 修改</button>
9.         </view>
10. </template>
12. <script>
13.         export default {
14.                 data() {
15.                         return {
16.                                 title: 'Hello',
17.                                 tempTitle: ""
18.                         }
19.                 },
20.                 onLoad() {
21.                         let isThis = this;
22.                         var option = {
23.                                 method: "GET",
24.                         };
25.                         isThis.getData(option);
26.                 },
27.                 methods: {
28.                         setTitle: function(e) {
29.                                 console.log(e.detail.value)
30.                                 this.tempTitle = e.detail.value;
31.                         },
32.                         getData(option) {
33.                                 let isThis = this;
34.                                 uni.showLoading({
35.                                         title: '加载中',
36.                                         mask: false
37.                                 });
38.                                 uni.request({
39.                                         url: '',
40.                                         method: option.method || 'GET', //不传默认为GET
41.                                         data: option.data || {}, //不传默认为空
42.                                         header: option.header || {
43.                                                 'Content-Type': 'application/json'
44.                                         },
45.                                         success: (res) => {
46.                                                 if (res.data.status == 1) {
47.                                                         isThis.title = res.data.data.title;
48.                                                         uni.hideLoading();
49.                                                 } else {
50.                                                         isThis.title = "";
51.                                                         uni.hideLoading();
52.                                                         uni.showModal({
53.                                                                 title: '提示',
54.                                                                 content: res.data.msg,
55.                                                                 showCancel: false,
56.                                                                 success: res => {},
57.                                                                 fail: () => {},
58.                                                                 complete: () => {}
59.                                                         });
60.                                                 }
61.                                         },
62.                                         fail: (err) => {
63.                                                 uni.showToast({
64.                                                         icon: 'none',
65.                                                         title: '啊哦~ 服务器出问题了，请刷新！',
66.                                                         duration: 2000
67.                                                 });
68.                                         }
69.                                 })
70.                         },
71.                         postData() {
72.                                 let isThis = this;
73.                                 uni.showLoading({
74.                                         title: '加载中',
75.                                         mask: false
76.                                 });
77.                                 var data = {
78.                                         "title": isThis.tempTitle,
79.                                 }
80.                                 uni.request({
81.                                         url: '',
82.                                         method: 'POST',
83.                                         data: data,
84.                                         header: {
85.                                                 'Content-Type': 'application/json'
86.                                         },
87.                                         success: (res) => {
88.                                                 if (res.data.status == 1) {
89.                                                         uni.hideLoading();
90.                                                 } else {
91.                                                         uni.hideLoading();
92.                                                         uni.showModal({
93.                                                                 title: '提示',
94.                                                                 content: res.data.msg,
95.                                                                 showCancel: false,
96.                                                                 success: res => {},
97.                                                                 fail: () => {},
98.                                                                 complete: () => {}
99.                                                         });
100.                                                 }
101.                                         },
102.                                         fail: (err) => {
103.                                                 uni.showToast({
104.                                                         icon: 'none',
105.                                                         title: '啊哦~ 服务器出问题了，请刷新！',
106.                                                         duration: 2000
107.                                                 });
108.                                         }
109.                                 })
110.                         },
111.                 }
112.         }
113. </script>
115. <style>
116.         .content {
117.                 display: flex;
118.                 flex-direction: column;
119.                 align-items: center;
120.                 justify-content: center;
121.         }
123.         .logo {
124.                 height: 200rpx;
125.                 width: 200rpx;
126.                 margin-top: 200rpx;
127.                 margin-left: auto;
128.                 margin-right: auto;
129.                 margin-bottom: 50rpx;
130.         }
132.         .text-area {
133.                 display: flex;
134.                 justify-content: center;
135.         }
137.         .title {
138.                 font-size: 36rpx;
139.                 color: #8f8f94;
140.         }
142.         .input-box {
143.                 margin: 10px auto;
144.                 padding: 10px;
145.                 width: 80%;
146.                 border: #b8b8be 1px solid;
147.                 height: 60rpx;
148.                 border-radius: 10px;
149.         }
150. </style>

复制代码

（1）前端吸取后端数据
   getData(option) {
                let isThis = this;
                uni.showLoading({
                    title: '加载中',
                    mask: false
                });
                uni.request({
                    url: '',  //后端接口
                    method: option.method || 'GET', //不传默认为GET
                    data: option.data || {}, //不传默认为空
                    header: option.header || {
                        'Content-Type': 'application/json'
                    }, 
                    success: (res) => {
                        if (res.data.status == 1) {
                            isThis.title = res.data.data.title;
                            uni.hideLoading();
                        } else {
                            isThis.title = "";
                            uni.hideLoading();
                            uni.showModal({
                                title: '提示',
                                content: res.data.msg,
                                showCancel: false,
                                success: res => {},
                                fail: () => {},
                                complete: () => {}
                            });
                        }
                    },
                    fail: (err) => {
                        uni.showToast({
                            icon: 'none',
                            title: '啊哦~ 服务器出问题了，请刷新！',
                            duration: 2000
                        });
                    }
                })
            },
  （2）前端发送数据
   postData() {
                let isThis = this;
                uni.showLoading({
                    title: '加载中',
                    mask: false
                });
                var data = {
                    "title": isThis.tempTitle,
                }
                uni.request({
                    url: '',    //后端接口
                    method: 'POST',
                    data: data,
                    header: {
                        'Content-Type': 'application/json'
                    },
                    success: (res) => {
                        if (res.data.status == 1) {
                            uni.hideLoading();
                        } else {
                            uni.hideLoading();
                            uni.showModal({
                                title: '提示',
                                content: res.data.msg,
                                showCancel: false,
                                success: res => {},
                                fail: () => {},
                                complete: () => {}
                            });
                        }
                    },
                    fail: (err) => {
                        uni.showToast({
                            icon: 'none',
                            title: '啊哦~ 服务器出问题了，请刷新！',
                            duration: 2000
                        });
                    }
                })
            },
  6、填写获取的APPID
        找到项目的根目次的manifest.json文件，选择“微信小程序配置”，填写对应的APPID；

7、配置小程序模拟器
        点击菜单栏“运行”，选择“运行到小程序模拟器”，选择“运行设置”，设置微信开辟者工具路径

8、运行项目
    运行小程序模拟器查看项目效果，且修改代码可以实时显现修改效果
        

        如果没有下载微信开辟者工具，那么可以选择运行到欣赏器进行查看项目效果，然后选择对应的欣赏器即可；

微信开辟者工具效果图：

        可能出现运行不乐成的问题，解决步伐如下

        到此前端搭建根本完成，接下来进军后端部门！

请查看下一章内容 ❤微信小程序-JAVA Springboot项目-后端搭建-项目搭建02-CSDN博客

https://blog.csdn.net/qq_53316719/article/details/133924718?spm=1001.2014.3001.5501

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。