云裂变营销网

标题: 小程序开发实战 4（实践） [打印本页]
作者: 匿名    时间: 2022-9-1 05:31
标题: 小程序开发实战 4（实践）
前端开发实战

4.10 前端实现思路
需求文档、产品原型分析，页面设计与规划。
1、有哪些页面
登录页面、注册页面、树洞广场页面、我的树洞页面、发布新树洞的页面。
2、页面需要做什么
登录页面：前端输入、后端比较、返回结果
树洞广场：读取后端（服务器）的数据，前端展示。分步加载。
发布树洞：前端输入、后端记录，身份识别
3、额外附加（复用）
底部菜单栏，多个页面可以使用
路由页面，整理用户身份信息
4、如何获取用户信息
查阅开发文档 api 部分
5、全局变量
多个页面都需要用户身份信息，方便起见，将用户身份信息存放再app.js的全局变量
6、使用阿里巴巴icon
iconfont-阿里巴巴矢量图标库
下载所需的图标（例如：加号、点赞）
利用取色器获取色号，截图保存获取图标。
7、编写第一个页面：load
读取用户信息的函数 getUserInfo 在21年已经弃用，实际上无法获取用户全部信息：

小程序开发实战 4（实践）-1.jpg

只剩下无意义的“微信用户”

修改后应使用 getUserProfile

小程序开发实战 4（实践）-2.jpg

两者在功能上有差异：后者没有了“已授权”状态

为了实现原来功能，代码修改如下：
WXML:
  1. <view wx:if="{{!hasUserInfo}}" class="mai">
  2.   <button class="but" wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 授权登录 </button>
  3.   <view class="med">————  ————</view>
  4.   <view class="txt">欢迎使用小程序，我们会妥善保存您的个人信息</view>
  5. </view>
复制代码
JS:
  1. Page({
  2.   data: {
  3.     userInfo: {},
  4.     hasUserInfo: false,
  5.     canIUseGetUserProfile: false
  6.   },
  8.   onLoad(options) {
  9.     console.log('before if()')
  10.     //先判断wxwx.getUserProfile是否可用
  11.     if (wx.getUserProfile) {
  12.       console.log('in if()')
  13.       this.setData({
  14.         canIUseGetUserProfile: true  //可用则设为true
  15.       })
  16.     }
  17.   },
  18.   getUserProfile(e) {
  19.     // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
  20.     // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  21.     console.log('in getUserProfile')
  23.     wx.getUserProfile({
  24.       desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  25.       success: (res) => {
  26.         this.setData({
  27.           userInfo: res.userInfo,
  28.           hasUserInfo: true
  29.         })
  30.         console.log(res.userInfo)
  31.       }
  32.     })
  33.   }
  34. })
复制代码
里面的 console.log 语句是用于跟踪代码运行过程的，删除没有影响。
其流程如下：
1）页面加载：OnLoad -->  if(wx.getUserProfile) 判断 getUserProfile 功能是否可用
2）可用则渲染“授权登录”的按钮
3）点击“授权登录”按钮： 调用 js 文件内的 getUserProfile 函数
4）正式调用 api ： wx.getUserProfile
5）调用成功将用户信息保存至 data : { userInfo }

8、注册页面
1）一个 view 抱住所有 input 输入框，wxss 用 page 设置
2）再用 view 包住 input ， 然后在 wxss 中进行修饰
输入框
  1. <view class='first'>
  2.     <input placeholder="用户名" placeholder-class="plas" class="inputs" type="text"></input>
  3. </view>
复制代码
修饰 （解析wxss语句的含义）
  1. .first{
  2.   width: 90%;         # view的宽度，占90%屏幕宽度
  3.   height: 100rpx;     # view的高度
  4.   margin-top: 80rpx;  # 盒子模型里面的 margin 距离顶部 80rpx，调整可以增减输入框上方的空白
  5.   margin-left: 5%;    # 左右各留5%
  6.   margin-right: 5%;
  7.   display: flex;
  8.   flex-direction:  row;
  9.   align-items: center;     # 让view里面的元素居中对齐
  10.   justify-content: center; # 同上，为默认值
  11.   background-color: #f2f2f2;
  12. }
  14. .plas{
  15.   font-size: 30rpx;   # 输入框中的提示字体及颜色
  16.   color: #cccccc;
  17. }
  19. .inputs{
  20.   line-height: 100rpx;  # 输入框内字体的行距
  21.   font-size: 30rpx;
  22.   color: black;
  23.   margin: auto;
  24.   margin-left: 20rpx;  #与左边的距离
  25.   width: 100%   #宽度占100%，除了左边的空白
  26. }
复制代码
3）用 view 实现注册按钮
注意 margin 的位置先于 margin-top, margin-left, margin-right 等
4）用 view + text 实现跳转备注
font-family 选择不同的字体
5）逻辑层 js 代码
data 中设置变量存储“用户名”、“手机号”、“密码”、“确认密码”等数据
输入框中 bindinput 绑定响应函数， 提示信息绑定跳转函数：
  1. usernameInput: function (e) {
  2.     this.data.username = e.detail.value
  3.     // console.log(this.data.username)
  4.   }
  6. <view class="cha" bindtap="signin">
  7.   <text class="no">已有账号，点我登陆</text>
  8. </view>
复制代码
用于检验“手机号”的正则表达式：
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
通过一系列的 if ... else if ... 语句，对输入框的信息进行检验：
  1. if (that.data.username == "") {
  2.       wx.showModal({
  3.         title: "提示",
  4.         content: "请输入用户名",
  5.         showCancel: false,
  6.       })
  7.     } else if (that.data.phonenumber == "") {
  8.       wx.showModal({
  9.         title: "提示",
  10.         content: "请输入手机号",
  11.         showCancel: false,
  12.       })
  14. # 手机格式检验
  16. else if (!myreg.test(that.data.phonenumber)) {
  17.       wx.showModal({
  18.         title: "提示",
  19.         content: "手机号格式有误",
  20.         showCancel: false,
  21.       })
  22.     }
  24. # 通过所有测试才能传递至后台
  25. else{
  26.       console.log('success')
  27.       // 传递至后台
  28.     }
复制代码
9、登录页面
10、发树洞页面
多行输入框：
利用 view 包裹 textarea 实现，其中 view 设置窗口宽度、背景颜色；textarea 设置字体、输入框与四周的距离、还有输入提示的样式等。
  1. <view class="textarea">
  2.   <textarea placeholder="发条树洞吧" placeholder-style="color:#888888; font-size:38" class="textinput" maxlength="-1" bindinput="bindTextAreaBlur" ></textarea>
  3. </view>
复制代码
发送函数，设置“加载中”的提示：
  1. send:function(e){
  2.     var that =this
  3.     wx.showLoading({
  4.       title: '加载中',
  5.     })
  6.     //发送至服务器
  8.     setTimeout(function(){wx.hideLoading()},1000)   # 1000毫秒后隐藏加载中提示
  9.   },
复制代码
11、底部菜单栏（树洞广场、我的树洞重复使用的代码）
一个大的 view ，包裹 3个小的view，小的view里面分别是：文字 text，图片 image ，文字 text
  注意样式文件，如何使得菜单栏常驻屏幕底部：
  1. .bottomrow{
  2.   background-color: white;
  3.   width: 100%;
  4.   height: 9%;
  5.   position:fixed;   #常驻底部
  6.   bottom: 0rpx;
  7.   display: flex;
  8.   flex-direction: row;
  9.   justify-content: center;
  10.   align-content: center;
  11. }
复制代码
12、树洞广场（最复杂部分）
1）导入复用代码
wxml：
  1. <include src="/pages/bottom_menu/bottom_menu"/>
复制代码
wxss：
  1. @ import "/pages/bottom_menu/bottom_menu"
复制代码
2）列表渲染
列表中的每一个元素，是一条树洞。
分析每一个view组件的实现方法。
分界条的实现：1.利用背景色；2.加一个底图；3. css添加效果。
先编写 wxml 形成框架，再编写 wxss 调整样式 （没有后端时，插入临时内容）
如何实现列表渲染。
底部菜单栏的不同状态。
添加跳转功能。
点赞功能。



欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/) Powered by Discuz! X3.4