完整短视频平台微信小程序案例【简单高效，无脑操作】

官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

一，微信小程序的注册

官方注册链接:小程序https://mp.weixin.qq.com/wxopen/waregister?action=step1

填写完信息后通过审核就能拥有你自己的小程序了

安装开发者工具（傻瓜式安装）：稳定版 Stable Build | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  二，微信小程序的开发

开发前基础准备

创建项目，可以使用你刚刚注册的AppID(在开发管理的开发设置里面），也可以使用测试号(不能部署) 

不使用云服务，模板就选Javascript模板

创建成功可以看见一堆文件，不着急一点一点讲解

项目结构

         pages文件夹下面用来放各个页面

.json后缀

        配置文件

        如pages里面说明了这个小程序有几个页面，在哪里

 "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

.wxml后缀

        可以类似于html，就是页面主题

.wxss后缀

        类似于css，页面样式

.js后缀

        用来写逻辑操作

app等前缀

        根目录下的app用于全局，其他如index.wxss用于index页面

正式开发

注册界面

1，修改app.json的pages

        先把pages里面的log页面删了没什么用，第一行的页面就是小程序最先打开的页面，然后直接在第一行输入图中页面内容，然后ctrl+s就会帮你自动生成需要的页面

         pages下面一个文件夹对应一个页面

 2，编辑register.wxml

        <view>标签相当于div，和html开发一样多用

        view的使用规则就是从大到小，从上到下，越多越好

        页面简单就用了一些image标签和form标签

<view class="page">
  <view>
    <image src="../resource/images/dsp.jpg" id="u"></image>
  </view>
  <view>
    <form bindsubmit="register">
      <view class="register">
        <image src="../resource/images/user.png" class="icon"></image>
        <label for="">账号：</label>
        <input name="username" placeholder="请输入账号" />
      </view>
      <view class="register">
        <image src="../resource/images/psd.png" class="icon"></image>
        <label for="">密码：</label>
        <input name="password" password="true" placeholder="请输入密码" />
      </view>
      <view id="rebut">
        <button type="primary" form-type="submit">注册</button>
      </view>
      <view>
        <button type="warn" bindtap="toLogin">返回登录</button>
      </view>
    </form>
  </view>
</view>

        跟html类似，具体标签的内容去官方文档查看

.register{
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.icon{
  width: 20px;
  height: 20px;
}
input{
  border: 1px solid black;
}
#rebut{
  padding-top: 70px;
}

注册后端

使用IDEA，官网下载即可

!!!!!!!!!!!!!!!!!!!!!!这里要使用spring boot框架搭建项目结构，一开始前期工作比较多，一步一步来

第一步  创建父项目

---

创建一个maven父项目，然后Add JDK找到你jdk的路径添加即可

把src删掉，因为这个父项目是不写代码的

在pom.xml修改打包方式（默认为jar），还有一些其他插件和依赖

<?xml version="1.0" encoding="UTF-8"?>
<project