简单开发
- 程序开发
- 微信小程序的目录结构
- 开发简单入门
- 微信登录流程
- 小程序发布
程序开发
微信小程序的目录结构
一个小程序主体部分由三个文件组成（必须放在项目的根目录）
| 文件 | 作用 |
|---|---|
| app.js | 小程序逻辑 |
| app.json | 小程序公共配置 |
| app.wxss | 小程序公共样式表 |
小程序包含一个描述整体程序的app和多个描述各自页面的page
一个小程序页面由四个文件组成：
| 文件类型 | 作用 |
|---|---|
| js | 页面逻辑 |
| wxml | 页面结构 |
| json | 页面配置 |
| wxss | 页面样式表 |
开发简单入门
其中index.wxml就类似于三件套中的html
<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list"><view class="container">Weixin</view>
</scroll-view>
其中的<view>标签就相当于<div>标签
比如我改成：
<view class="container"><view>{{msg}}</view></view>
数据需要在js文件中进行配置：
Page({data:{msg:'hello,world'}
})- 实现获取微信用户的头像和昵称
我们将这个函数写到js文件的一个函数中：
在wxml中：
<view><button bindtap="getUserInfo" type="primary">获取用户信息</button></view>
在js文件中：
getUserInfo(){wx.getUserProfile({desc: '获取用户信息',success: (res)=>{console.log(res.userInfo)}})}
- 实现微信登录，获取微信用户的授权码
UserLogin(){wx.login({success: (res) => {console.log(res.code)},})}
- 在微信小程序中使用ajax发送请求
我们先准备一个按钮绑定请求事务：
<view><button bindtap="Qing" type="primary">发送请求</button></view>
进行逻辑处理：
Qing(){wx.request({url: 'http://localhost:8080/user/shop/status',method: 'GET',success: (res)=>{console.log(res.data)}})}
微信登录流程
在前后端开发过程中，在小程序首先拿到用户的一次性授权码，发送给后端服务器，服务器通过请求参数一次性授权码，APP唯一id，app密钥向微信服务器发送请求，返回用户唯一id以及token，有后端进行操作处理，返回用户端token保存，下次进行校验完成其中的业务访问
小程序发布
首先点击上传，将微信小程序上传到微信服务器中，这时就能在微信小程序平台看到上传的开发版本：
点击提交审核就会进行审核，审核成功会成功上线
