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

自媒体运营教程产品运营 2026-04-11 3

前端开发实战

4.10 前端实现思路

需求文档、产品原型分析，页面设计与规划。

1、有哪些页面

登录页面、注册页面、树洞广场页面、我的树洞页面、发布新树洞的页面。

2、页面需要做什么

登录页面：前端输入、后端比较、返回结果

树洞广场：读取后端（服务器）的数据，前端展示。分步加载。

发布树洞：前端输入、后端记录，身份识别

3、额外附加（复用）

底部菜单栏，多个页面可以使用

路由页面，整理用户身份信息

4、如何获取用户信息

查阅开发文档 api 部分

5、全局变量

多个页面都需要用户身份信息，方便起见，将用户身份信息存放再APP.js的全局变量

6、使用阿里巴巴icon

iconfont-阿里巴巴矢量图标库

下载所需的图标（例如：加号、点赞）

利用取色器获取色号，截图保存获取图标。

7、编写第一个页面：load

读取用户信息的函数 getUserInfo 在21年已经弃用，实际上无法获取用户全部信息：

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

修改后应使用 getUserProfile

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

为了实现原来功能，代码修改如下：

WXML:

<view wx:if="{{!hasUserInfo}}" class="mai">
<button class="but" wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 授权登录 </button>
<view class="med">———— • ————</view>
<view class="txt">欢迎使用小程序，我们会妥善保存您的个人信息</view>
</view>

JS:

Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false
},

onLoad(options) {
console.log('before if()')
//先判断wxwx.getUserProfile是否可用
if (wx.getUserProfile) {
console.log('in if()')
this.setData({
canIUseGetUserProfile: true //可用则设为true
})
}
},
getUserProfile(e) {
// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
console.log('in getUserProfile')

wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
console.log(res.userInfo)
}
})
}
})

里面的 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 设置

相关影片资源迅雷下载推荐
小程序开发实战 4 （理论）
前端开发实战4.2 微信开发平台有什么用？1、平台注册（小程序账户申请）2、代码上传平台（版本管理）3、成员管理：管理员、开发者、体验成员4、开发：APPID 、密钥、服务器配置4.3 开发者工具1、如何新建项目（不使 ...
小程序开发,小程序开发实战 4 （理论）

2）再用 view 包住 input ，然后在 wxss 中进行修饰

输入框

修饰（解析wxss语句的含义）

.first{
width: 90%; # view的宽度，占90%屏幕宽度
height: 100rpx; # view的高度
margin-top: 80rpx; # 盒子模型里面的 margin 距离顶部 80rpx，调整可以增减输入框上方的空白
margin-left: 5%; # 左右各留5%
margin-right: 5%;
display: flex;
flex-direction: row;
align-items: center; # 让view里面的元素居中对齐
justify-content: center; # 同上，为默认值
background-color: #f2f2f2;
}

.plas{
font-size: 30rpx; # 输入框中的提示字体及颜色
color: #cccccc;
}

.inputs{
line-height: 100rpx; # 输入框内字体的行距
font-size: 30rpx;
color: black;
margin: auto;
margin-left: 20rpx; #与左边的距离
width: 100% #宽度占100%，除了左边的空白
}

3）用 view 实现注册按钮

注意 margin 的位置先于 margin-top, margin-left, margin-right 等

4）用 view + text 实现跳转备注

font-family 选择不同的字体

5）逻辑层 js 代码

data 中设置变量存储“用户名”、“手机号”、“密码”、“确认密码”等数据

输入框中 bindinput 绑定响应函数，提示信息绑定跳转函数：

usernameInput: function (e) {
this.data.username = e.detail.value
// console.log(this.data.username)
}

<view class="cha" bindtap="signin">
<text class="no">已有账号，点我登陆</text>
</view>

用于检验“手机号”的正则表达式：

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;

通过一系列的 if ... else if ... 语句，对输入框的信息进行检验：

if (that.data.username == "") {
wx.showModal({
title: "提示",
content: "请输入用户名",
showCancel: false,
})
} else if (that.data.phonenumber == "") {
wx.showModal({
title: "提示",
content: "请输入手机号",
showCancel: false,
})

# 手机格式检验

else if (!myreg.test(that.data.phonenumber)) {
wx.showModal({
title: "提示",
content: "手机号格式有误",
showCancel: false,
})
}

# 通过所有测试才能传递至后台
else{
console.log('success')
// 传递至后台
}

9、登录页面

10、发树洞页面

多行输入框：

利用 view 包裹 textarea 实现，其中 view 设置窗口宽度、背景颜色；textarea 设置字体、输入框与四周的距离、还有输入提示的样式等。

发送函数，设置“加载中”的提示：

send:function(e){
var that =this
wx.showLoading({
title: '加载中',
})
//发送至服务器

setTimeout(function(){wx.hideLoading()},1000) # 1000毫秒后隐藏加载中提示
},

11、底部菜单栏（树洞广场、我的树洞重复使用的代码）

一个大的 view ，包裹 3个小的view，小的view里面分别是：文字 text，图片 image ，文字 text

注意样式文件，如何使得菜单栏常驻屏幕底部：

.bottomrow{
background-color: white;
width: 100%;
height: 9%;
position:fixed; #常驻底部
bottom: 0rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}

12、树洞广场（最复杂部分）

1）导入复用代码

wxml：

wxss：

@ import "/pages/bottom_menu/bottom_menu"

2）列表渲染

列表中的每一个元素，是一条树洞。

分析每一个view组件的实现方法。

分界条的实现：1.利用背景色；2.加一个底图；3. css添加效果。

先编写 wxml 形成框架，再编写 wxss 调整样式（没有后端时，插入临时内容）

如何实现列表渲染。

底部菜单栏的不同状态。