云开发小程序登录界面

(一)创建一个新的小程序项目

1.进入微信开发者工具

2.创建一个新的小程序项目

1. 填写项目名称
2. 选择项目文件路径
3. 填写AppID
4. 开发者模式选择小程序
5. 后端服务选择不使用云服务(后期手动开启云服务不选择自动配置云服务)
6. 确定在这里插入图片描述

(二)创建登陆界面

效果图

1.登录界面wxml用到标签

1. input
2. view
3. image
4. button

<!-- 登录背景 -->
<view class="bg_picture">
  <!-- 背景图片 -->
  <image src="../../img/beijin.jpg" class="bg_img">
    <view class="bg_title">
      <!-- 头部图片内容 -->
      <view class="title">
        <image src="../../img/touxiang.jpg" class="title_img"></image>
      </view>
      <view class="body">
        <!-- 账号 -->
        <view class="body_zhanghao">
          <image src="../../img/zhanghaoanquan.png" class="body_img"></image>
          <input type="text" placeholder="账号" ></input>
        </view>
        <!-- 密码 -->
        <view class="body_mima">
          <image src="../../img/mimalan.png" class="body_img"></image>
          <input type="text" password="true" placeholder="密码"></input>
        </view>
        <!-- 登录 -->
        <view class="log_wrapper">
          <view class="admin">
            <view>管理员</view>
          </view>
          <view class="log">
<image src="../../img/log.jpg" class="loging"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- body -->

  </image>
</view>
           

2.登录界面wxss用到知识点

1. position(定位)
2. flex布局

(三)云开发登录界面数据库的搭建

1.初始化云服务

1. 跟Page页面同层级新建一个文件夹
2. project.config.json文件中配置云环境
3. app.js文件中初始化云环境

//初始化配置文件(project.config.json)
  cloudfunctionRoot":"cloud",
 //云环境初始化
      wx.cloud.init({
        //env:云开发环境的ID
        env:"dati-9gyr8meec73f282d"
      })
           

2.开通cms后台

1. 云开发-更多-内容管理-开通-下一步-输入账号密码-开通
2. 内容管理-访问地址-登录-输入账号密码登录
3. 创建内容模型-内容集合里添加内容数据
4. 云数据库中打开用户阅读权限
5. cms后台中开通内容模型写上原始数据

3.实现登录效果

1. 获取账户和密码输入框内容
2. 用账户输入框内容对数据库进行查询判断跳转页面