服务器端

1.添加路由

2.编写控制器(这里有验证码)

 

小程序客户端

1创建注册页面

打开src/app.wpy开始编辑

编辑注册页面src/pages/auth/register.wpy(这里调用了验证码接口)

1.下载样式

点击下载

2更改文件

将下载的文件夹style直接移动到 /src/目录下。

3引入样式

编辑src/app.wpy文件

项目源地址 https://github.com/wepyjs/wepy-weui-demo

web demo

打开文件/src/app.wpy开始全部替换

将里面的多余实例代码去去除掉没有用 图标下载

1.小程序登陆时序图

服务器端(以laravel为主)

1安装EasyWeChat

1.1修改配置文件将config/wechat.php文件中小程序部分打开。

1.2编辑.env配置文件,去微信小程序配置平台哪里获取appid和secret

2.修改表结构

database/migrations/< your_date >add_weixin_session_key_to_users_table.php

运行迁移命令

3代码编写

3.1添加路由((使用 dingo api了))

route/api.php

3.2验证类

开始编辑app/Http/Requests/Api/WeappAuthorizationRequest.php

3.3控制器(使用 dingo api了)

app/Http/Controllers/Api/AuthorizationsController.php

3.4编辑模型user主要添加weixin_session_keyweapp_openid这两个参数

 

 

 

 

end

 

 

 

 

客户端(小程序以wepy为例)

1.安装必要组件

获取code,需要安装promise-polyfillwepy-async-function插件

2.编写获取code的测试代码

打开src/app.wpy增加 this.use('promisify'); 使 API promise 化:

执行上面的代码会获得一个code 编码

这个code就是小程序客户端需要往服务端发送的值。现在我们可以将onLaunch方法里面的代码清空

3 创建登陆页面&配置登陆页面

打开src/app.wpy文件并且编辑

4.封装接口请求

创建文件

编辑src/utils/api.js

5编辑登陆页面

编辑src/pages/auth/login.wpy文件

6测试

填入服务器上面的存储的用户密码即可。

文件夹名称 类型 简介
dist 目录 存放编译后的文件
src 目录 源码文件,都是在这里写代码
     src/app.wpy 目录 项目入口文件
     src/pages 目录 存放小程序页面
     src/components 目录 存放小程序组件
     src/mixins 目录 存放 Mixin 文件
node_modules 目录 NPM 依赖模块
src/index.template.html 文件 模板页面html
wepy.config.js 文件 全局配置文件
yarn.lock 文件 依赖列表,确保这个应用的副本使用相同版本的依赖
package.json 文件 项目的 package 配置
project.config.json 文件 开发者工具配置
.wepyignore 文件 WePY 忽略的文件
.wepycache 文件 WePY 缓存文件,防止在build时,重复build npm目录
.prettierrc 文件 prettier 配置文件
.eslintrc.js 文件 eslint 配置文件
.eslintignore 文件 eslint 忽略的文件
.editorconfig 文件 编辑器配置文件

1.创建小程序账号

https://mp.weixin.qq.com/

 

2.下载开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

3.创建小程序 ,不要创建模板

4 安装wepy-cli