官方文档:
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删掉,因为这个父项目是不写代码的文章来源:https://www.toymoban.com/news/detail-491438.html
在pom.xml修改打包方式(默认为jar),还有一些其他插件和依赖文章来源地址https://www.toymoban.com/news/detail-491438.html
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
到了这里,关于完整短视频平台微信小程序案例【简单高效,无脑操作】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!