小程序开发实战 4（实践）

前端开辟实战

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



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

点窜后应利用 getUserProfile



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

为了实现本来功用，代码点窜以下：
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 调剂款式 （没有后端时，插入姑且内容）
若何实现列表衬着。
底部菜单栏的分歧状态。
增加跳转功用。
点赞功用。