很高兴能在这写这篇文章，我之前也没写文章的习惯，只喜欢看别人写的，有一次遇到问题搜了一下别人写的，感觉字里行间透露这一种魅力，就想着啥时自己也写一点东西，正好最近参与了一个微信小程序的开发，就想写下这篇博客，旨在为大家分享一下，有兴趣的同学可以了解一下。，适合一些新手了解，功能是实现通过快递单号查询快递轨迹的。
微信这款工具及其里面的小程序相信大家都有所了解，腾讯有一款专门开发小程序的工具，我用到的是wechat_devtools_1.02.1809260_x64.exe这个版本，有兴趣的可以搜索了解一下 还有他们封装的好多接口用起来挺方便的，https://developers.weixin.qq.com/miniprogram//devtools/download.html 这个网址就是他们定义和封装的好多东西，可以帮助我们更好地去设计自己的程序，有兴趣可以了解一下，接下来介绍下这个小项目
你可以去网站学习下软件的使用，这里就不赘述了。首先是我们建的项目下的文件夹，在page目录下先新建目录在新建page，每个文件夹都是一个页面，里面包括四个文件夹，分别是js脚本，界面布局和css样式文件，还有个json文件（这个文件几乎没用到，我目前也不太了解，只知道每个页面目录的路径都会在app.json中，第一个就是小程序进入之后显示的页面你在js中可以写自动发送或者页面中做链接都可以，也欢迎了解的同学学习学习）。他们定义封装的东西都是基于HTML5和js的，文件后缀差不多多只是以wx开头。 我们做了登录，查询，注册，个人信息界面，修改密码界面，下面写出各个页面的代码，可以看一下，
index这个是项目建好时自动生成的获取微信用户图像的界面，代码也是写好的，我们只写了个自动跳转的js，
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
其余部分都是自己生成就不写了
快递查询本应有个自动识别的功能，因为要分析大量数据进行总结，所以我们暂时没这个接口，以后有机会我尝试写一下这个，要是有同学有这部分功能的借口也欢迎一起讨论一下。
查 询界面，也是我们的主界面
query.js
// pages/query/query.js
const app = getApp();
Page({
/** * 页面的初始数据 */
data: {
//快递公司列表
list:app.globalData.list,
objectArray: app.globalData.objectArray,
//选择快递公司索引
index: 0,
//快递公司编号
com: "",
//物流轨迹跟踪集合
ary:"",
//扫描的二维码
scannum:"",
//登录状态
isLogin: false,
//x显示登陆成功信息
isShowMessage:true,
//图像地址
avatarUrl:"" },
getenteprise: function (e) {
//console.log(e.detail.value);
var curindex = e.detail.value;
this.setData(
{
index: curindex,
com: this.data.objectArray
[curindex].id
}
);
// console.log(this.data.com);
}, getscan:function(e){
var that=this;
wx.scanCode({
scanType:[],
success:function(res){
//console.log(res);
//获取二维码值
if(res.result!=""){
that.setData({
scannum:res.result
});
}
//没获取到值
else{
wx.showModal({
title: '温馨提示',
content: '未扫到二维码，请重扫',
})
}
}
})
},
getSearch: function (e) {
var that = this;
//console.log(e);
var num = e.detail.value.express_num;
//console.log(num);
//快递单号不能为空
if (num == "") {
wx.showModal({
title: '温馨提示',
content: '快递单号不能为空',
})
return;
}
//快递公司不能为空
if (that.data.com == "") {
wx.showModal({ t
itle: '温馨提示',
content: '请选择快递公司',
})
return;
}
//查询快递(重点)
wx.request({
url: 'https://www.itlaobing.com/express/api',
data: { nu: num, com: that.data.com },
complete: function (result) {
//console.log(result);
if (result.data.Success == true) {
that.setData({
ary: result.data.Traces,
});
}
else {
if (e.data != null) {
wx.showModal({
title: '温馨提示',
content: result.data.Reason,
})
}
else {
wx.showModal({
title: '温馨提示',
content: '对不起，没有查询到此快递单号的轨迹',
})
}
}
}
})
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
var that=this;
if (app.globalData.isLogin==true){
wx.getUserInfo({
success:function(res){
that.setData({
avatarUrl:res.userInfo.avatarUrl
})
}
})
that.setData({
isLogin:app.globalData.isLogin,
isShowMessage: false,
username:app.globalData.username,
list: app.globalData.list,
objectArray: app.globalData.objectArray
})
}
},
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {
},
/** * 生命周期函数--监听页面显示 */ onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */ onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */ onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {
},
/** * 用户点击右上角分享 */ onShareAppMessage: function () {
}})
代码部分基本都有注释，就不讲解了，就是粘贴过来编辑问题看起来一堆乱得很，尝试复制出去自己再编辑下看会不会好
query.wxml
<!--pages/query/query.wxml-->
<!--用户登录状态开始-->
<view class='login_state'>
<view class="login_unlogin_state" hidden='{{isLogin}}'> <
navigator url='../register/register' class="register_text">注册</navigator>
<navigator url="../login/login" class='login_text'>登录</navigator>
</view>
<view class="login_unlogin_state" hidden='{{isShowMessage}}'>
<view><image class='headimg' src="{{avatarUrl}}" ></image></view>
<view style='float:left'><navigator url='../userinfo/userinfo'> <text>欢迎{{username}}</text></navigator></view>
<view class='modfiy' style='float:right'><navigator url='../modifypass/modifypass'>修改密码</navigator></view>
</view>
</view>
<!--用户登录状态结束-->
<!--login开始--->
<view style='height:50rpx;width:30rpx;'></view>
<view class='logo'>
<image src='../imag/3.jpg' class="logo_img"></image>
<view class='logo_text'>查快递，来这里</view>
</view>
<!--login结束--->
<!--查询快递视图开始-->
<form bindsubmit='getSearch'>
<view class='express_view'>
<input type='text' placeholder='请输入快递账号' name="express_num" class='express_num_input' value='{{scannum}}'></input>
<image src='../imag/5.jpg' class='scanimg' bindtap='getscan'></image>
<button class='express_num_btn' form-type='submit' >查询</button></view>
</form>
<!--查询快递视图结束-->
<!--选择快递公司开始-->
<view class='express_enterprise express_view'>
<picker bindchange='getenteprise' name="express_enterprise_btn" class='express_enterprise_btn_p' range='{{list}}'> {{objectArray[index].name}}
</picker>
</view>
<!--选择快递公司结束-->
<!--快递信息显示-->
<view>
<view class="items" wx:for="{{ary}}" wx:key="*this">
<icon type="success" size="12"></icon>
<view>
<text>{{item.AcceptStation}}</text>
<text>{{item.AcceptTime}}</text>
</view>
</view>
</view>
<!--快递信息显示-->
<!--低部水印开始-->
<view style='height:20rpx'></view><view class='express_bottom'> http://www.itlaobing.com</view>
<!--低部水印结束-->
query.wxss … 这部分注意的是有一块区域登陆前和登录后显示的不一样，我们做了两个视图，通过hidden属性进行隐藏和显示
/* pages/query/.wxss */
.login_state{ width: 100%; height: 80rpx; background-color: #00E3E3; color: #FFF; font-size: 33rpx;}
.login_unlogin_state{ margin: 0px auto; width: 80%; height: 75rpx; background-color: #00E3E3; font-size: 30rpx;}
.modfiy{ float:right; top:20rpx; font-size: 30rpx}
.register_text{ display: block; float: right; }
.login_text{ display: block; float:left; }
.logo{ width: 50%; height: 235rpx; margin: 0px auto; text-align: center; padding-top: 25rpx; padding-bottom: 45rpx;}
.logo_img{ border-image: 20rpx; width:180rpx; height:180rpx;}
.logo_text{ font-size: 25rpx; color:#2b29ac;}
.express_view{ margin: 20rpx auto; width: 88%; height: 90rpx; display: flex; flex-direction: row; position: relative;}
.express_num_input{ width:700rpx; height:70rpx; border: 1px solid #00E3E3; border-radius: 15rpx; padding-left: 12rpx; font-size: 25rpx;}
.express_num_btn{ width: 24%; height: 77%; font-size: 28rpx; background-color: #00E3E3; color: #FFF;}
.express_enterprise_btn_p{ width: 100%; height: 83%; background-color: #00E3E3; border-radius: 15rpx; color: #FFF; font-size: 35rpx; text-align: center; line-height: 70rpx;}
.express_bottom{ width: 100%; height: 60rpx; color:#6f6c6c71; font-size: 28rpx; text-align: center; position: fixed; bottom: 0px;}
.items{ width: 88%; margin: 15rpx auto; background-color: #DDD; display: flex; flex-direction: row; font-size: 30rpx; border-radius:10rpx; }
.scanimg{ width:60rpx; height:60rpx; border-radius:20rpx; position: absolute; top: 8rpx; right:140rpx; z-index: 5; }
.headimg{ width: 56rpx; height: 56rpx; border-radius: 25rpx; right: 0rpx; float: left;}
json文件里没东西，只有app.json中自动生成的
login界面
login.js
// pages/login/login.js
const app = getApp();//定义一个变量对象
Page({
/** * 页面的初始数据 */
data: {
},
submit_login: function (e) {
//console.log(e);
//用户名
var vusername = e.detail.value.username;
//密码
var vuserpass = e.detail.value.userpass;
//判断数据有效性
//判断用户名是否为空
if (vusername == "") {
wx.showModal({
title: '温馨提示',
content: '用户名不能为空',
})
return;
}
//判断密码是否为空
if (vuserpass == "") {
wx.showModal({
title: '温馨提示',
content: '密码不能为空',
})
return;
}
//实现登录业务
wx.showLoading({
title: '正在登录......', })
//实现登录业务，连接服务器
wx.request({
url: 'https://www.itlaobing.com/express/weixinlogin.do',
data: { username: vusername, userpass: vuserpass },
complete: function (result) {
//隐藏loading
wx.hideLoading();
console.log(result);
//判断登录是否成功
if (result.data.Success == true) {
//登录成功
wx.showToast({
title: result.data.Reason, })
//设置登录成功的全局数据
app.globalData.list = result.data.list;
app.globalData.objectArray = result.data.objectArray;
//记录登陆状态
app.globalData.isLogin=true;
app.globalData.username=vusername;
//console.log(app.globalData.list);
//console.log(app.globalData.objectArray);
//延迟一段时间转向查询主页
setTimeout(function () {
wx.redirectTo({
url: '../query/query',
})
}, 1000);
}
//登录失败
else {
wx.showModal({
title: '温馨提示',
content: result.data.Reason,
})
}
}
})
},
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {
},
/** * 生命周期函数--监听页面显示 */ onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */ onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */ onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {
},
/** * 用户点击右上角分享 */ onShareAppMessage: function () {
}})
login.wxml
<!--pages/login/login.wxml-->
<!--sl_login.wxml-->
<!--主容器S-->
<view class='contain'>
<!--logoS-->
<view class='express_logo'>
<image src='../imag/3.jpg' class='logo'></image>
<view class='logo_text'>查快递，来这里</view>
</view> <!--logoE-->
<!--用户名S-->
<form bindsubmit='submit_login'>
<view class='login_username'>
<text class='text'>用户名:</text>
<input class='input_user' name='username' placeholder='请输入用户名'></input>
</view>
<!--用户名E-->
<!--密码S-->
<view class='login_userpass'>
<text class='text' decode='true'>密 码:</text>
<input class='input_pass' password='true' name='userpass' placeholder='请输入密码'></input>
</view>
<!--密码E-->
<!--登录按钮S-->
<view class='login_submit'>
<button class='btn_submit' form-type='submit' >登录</button>
</view>
</form>
<!--登录按钮E-->
<!--转到注册页面S-->
<view class='to_register'>
<navigator url='../register/register' hover-class='none'>没有账号？去注册</navigator> </view>
<!--转到注册页面E-->
<!--水印S-->
<view class='express_footer'>
<text class='express_footer_text' decode='true'> www.itlaobing.com</text>
</view>
</view>
login.wxss
/* pages/login/login.wxss */
.contain{ margin-top: 150rpx;}
.express_logo{ width:100%; height: 230rpx;}
.logo{ width:180rpx; height:180rpx; margin-left:285rpx;}
.logo_text{ width:50%; margin: 0 auto; text-align: center; font-size: 25rpx; color:#6f6c6c; }
.login_username{ width:78%; height:70rpx; line-height: 70rpx; margin: 60rpx auto 60rpx; }
.input_user{ width:70%; height: 60rpx; font-size:32rpx; padding-left:15rpx; float: right; border-radius: 10rpx; border:2rpx solid #00E3E3;}
.login_userpass{ width:78%; height:70rpx; line-height: 70rpx; margin: 0 auto; }
.input_pass{ width:70%; height: 60rpx; font-size:35rpx; padding-left:15rpx; float: right; border-radius: 10rpx; border:2rpx solid #00E3E3;}
.text{ height:60rpx; font-size:38rpx; font-weight:500; float: left; color:#00E3E3; }
.login_submit{ width:78%; height: 70rpx; margin: 70rpx auto 0; }
.btn_submit{ width:100%; height:70rpx; line-height: 70rpx; color:#fff; font-size:32rpx; background-color: #00E3E3; }
.to_register{ width:100%; height:50rpx; line-height:50rpx; margin-top: 100rpx; text-align: center; }
.to_register navigator{ font-size: 26rpx; color:#6f6c6c;}
.express_footer{ width: 100%; height: 40rpx; font-size: 30rpx; text-align: center; color:#aaaaaa; position: fixed; bottom: 10rpx;}
register界面
register.js
// pages/register/register.js
const app=getApp();
Page({
/** * 页面的初始数据 */
data: {
},
submit_register: function (e) {
var that = this;
//获取值
var username = e.detail.value.username;
var userpass = e.detail.value.userpass;
var comuserpass = e.detail.value.comuserpass
//s数据有效性验证
if (username == "" || username.length < 6 || username.length > 18 || isNaN(username) == false){
wx.showModal({
title: '温馨提示',
content: '用户名须在6-18位字符内',
})
return;
}
if (userpass == "" || userpass.length < 6 || userpass.length > 16 || isNaN(userpass) == false) {
wx.showModal({
title: '温馨提示',
content: '密码要求长度6 - 16位字符与数字组合',
})
return;
}
if(comuserpass=="" || comuserpass!=userpass){
wx.showModal({
title: '温馨提示',
content: '确认密码与密码不一样',
})
return;
}
//-----提交服务器，进行注册------
wx.showLoading({
title: '正在注册',
})
//提交数据
wx.request({
url: 'https://www.itlaobing.com/express/weixinRegister.do',
data:{
username:username,
userpass:userpass,
comuserpass:comuserpass,
},
complete:function(res){
wx.hideLoading();
//注册成功
if(res.data.Success==true){
wx.showToast({
title: res.data.Reason,
})
//设置全局数据
app.globalData.list=res.data.list; app.globalData.objectArray=res.data.objectArray;
//记录登录状态
app.globalData.isLogin=true;
//记录用户名1
app.globalData.username=username;
//转向登录页
setTimeout(function(){
wx,wx.redirectTo({
url: '../query/query',
})
},1300)
}
else{
wx.showModal({
title: '温馨提示',
content: res.data.Reason,
})
}
}
}) },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {
},
/** * 生命周期函数--监听页面显示 */ onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */ onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */ onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {
},
/** * 用户点击右上角分享 */ onShareAppMessage: function () {
}})
register.wxml
<!--pages/register/register.wxml-->
<!--sl_register.wxml-->
<!--主容器S-->
<view class='contain'>
<!--logoS-->
<view class='express_logo'>
<image src='../imag/3.jpg' class='logo'></image>
<view class='logo_text'>查快递，来这里</view>
</view>
<!--logoE-->
<!--用户名S-->
<form bindsubmit='submit_register'>
<view class='login_username'>
<text class='text'>用户名:</text>
<input class='input_user' name='username' placeholder='请输入用户名'></input>
</view>
<!--用户名E-->
<!--密码S--> <
view class='login_userpass'>
<text class='text' decode='true'>密 码:</text>
<input class='input_pass' password='true' name='userpass' placeholder='请输入密码'></input>
</view>
<!--密码E-->
<!--密码S-->
<view class='login_comuserpass'>
<text class='text' decode='true'>确认密码:</text>
<input class='input_compass' password='true' name='comuserpass' placeholder='请输入确认密码'></input>
</view>
<!--密码E-->
<!--登录按钮S-->
<view class='login_submit'>
<button class='btn_submit' form-type='submit' >注册</button>
</view>
</form>
<!--登录按钮E-->
<!--转到注册页面S-->
<view class='to_register'>
<navigator url='../login/login' hover-class='none'>已有账号？去登录</navigator>
</view>
<!--转到注册页面E-->
<!--水印S-->
<view class='express_footer'>
<text class='express_footer_text' decode='true'> www.itlaobing.com</text> </view>
</view>
register.wxss
/* pages/register/register.wxss */
.contain{ margin-top: 150rpx; }
.express_logo{ width:100%; height: 230rpx;}
.logo{ width:180rpx; height:180rpx; margin-left:285rpx; }
.logo_text{ width:50%; margin: 0 auto; text-align: center; font-size: 25rpx; color:#6f6c6c; }
.login_username{ width:84%; height:70rpx; line-height: 70rpx; margin: 60rpx auto 60rpx; display: flex; }
.input_user{ width:70%; height: 60rpx; font-size:32rpx; padding-left:15rpx; margin-left:20rpx; border-radius: 10rpx; border:2rpx solid #00E3E3;}
.login_userpass{ width:84%; height:70rpx; line-height: 70rpx; margin: 0 auto; display: flex; }
.input_pass{ width:70%; height: 60rpx; font-size:32rpx; padding-left:15rpx; margin-left:20rpx; border-radius: 10rpx; border:2rpx solid #00E3E3;}
.login_comuserpass{ width:84%; height:70rpx; line-height: 70rpx; margin: 60rpx auto 0; display: flex; }
.input_compass{ width:70%; height: 60rpx; font-size:32rpx; padding-left:15rpx; margin-left:20rpx; border-radius: 10rpx; border:2rpx solid #00E3E3;}
.text{ width:25%; text-align: right; font-size:35rpx; font-weight:500; color:#00E3E3;}
.login_submit{ width:84%; height: 70rpx; margin: 70rpx auto 0; }
.btn_submit{ width:100%; height:70rpx; line-height: 70rpx; color:#fff; font-size:32rpx; background-color: #00E3E3; }
.to_register{ width:100%; height:50rpx; line-height:50rpx; margin-top: 100rpx; text-align: center; }
.to_register navigator{ font-size: 26rpx; color:#6f6c6c;}.express_footer{ width: 100%; height: 40rpx; font-size: 30rpx; text-align: center; color:#aaaaaa; position: fixed; bottom: 10rpx;}
modifypass页面
modifypass.js
.const app = getApp();Page({
/** * 页面的初始数据 */
data: {
},
/**
* 实现思路
* * 1.获取数据
* * 2.数据有效性验证
* （1）获取全局变量username,并且原密码不能为空
* （2）新密码不能为空，新密码长度为6-16位的数字与字母的组合，是否位纯数字
* (3) 确认密码不能能空，判断是否与新密码一致
*
* 3.提交服务器，得到服务器返回的json串；
*/
submit_modifypass: function (e) {
console.log(e.detail.value.username);
//1.获取数据
var username = app.globalData.username;
var olduserpass = e.detail.value.olduserpass;
var newuserpass = e.detail.value.newuserpass;
var comnewuserpass = e.detail.value.comnewuserpass;
//2.数据有效性验证
//（1）原密码不能为空
if (username == "") {
wx.showModal({
title: '温馨提示',
content: '请登录后再修改密码！',
});
return;
}
if (olduserpass == "") {
wx.showModal({
title: '温馨提示',
content: '原密码不能为空！',
});
return;
}
//（2）新密码不能为空，新密码长度为6-16位的数字与字母的组合，是否位纯数字
if (newuserpass == "") {
wx.showModal({
title: '温馨提示',
content: '新密码不能为空！',
});
return;
}
if (newuserpass.length < 6 || newuserpass.length > 16 || isNaN(newuserpass) == false) { wx.showModal({
title: '温馨提示',
content: '请输入密码长度为8-16位的字符与数字组合！',
});
return;
}
//(3) 确认密码不能能空，判断是否与新密码一致
//确认密码不能为空
if (comnewuserpass == "") {
wx.showModal({
title: '温馨提示',
content: '确认密码不能为空！',
});
return;
}
//密码与确认密码必须一致
if (newuserpass != comnewuserpass) {
wx.showModal({
title: '温馨提示',
content: '新密码与确认密码不一致！',
});
return;
}
//显示修改框
wx.showLoading({
title: '修改中...',
})
//修改密码业务
wx.request({
url: 'https://www.itlaobing.com/express/weixinmodfiypass.do',
dataType: "json",
data: {
username: username,
olduserpass: olduserpass,
newuserpass: newuserpass,
comnewuserpass: comnewuserpass
},
//回调函数
complete: function (result) {
//隐藏修改框
wx.hideLoading();
//修改成功
if (result.data.Success == true) {
wx.showToast({
title: '修改成功',
icon: 'success',
duration: 2000
});
//转向主页面登录
setTimeout(function () {
wx.navigateTo({
url: '../login/login',
});
}, 1500 )
}
//注册失败
else {
//隐藏注册框
wx.hideLoading();
wx.showModal({
title: '温馨提示',
content: result.data.Reason,
})
}
}
}) },
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
},
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {
},
/** * 生命周期函数--监听页面显示 */ onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */ onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */ onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {
},
/** * 用户点击右上角分享 */ onShareAppMessage: function () {
}})
modifypass.wxml
<!--pages/modifypass/modifypass.wxml-->
<!--主容器S-->
<view class='modify_contain'>
<view class='express_header'>
<text class='express_header_text'>修改密码</text>
</view>
<!--logoS-->
<view class='modify_express_logo'>
<image src='../imag/3.jpg' class='logo'></image>
<view class='logo_text'>查快递，来这里</view> </view>
<!--logoE-->
<!--用户名S-->
<form bindsubmit='submit_modifypass'>
<view class='login_username'>
<text class='text'>原密码:</text>
<input class='input_user' password='true' name='olduserpass' placeholder='请输入原密码'></input>
</view>
<!--用户名E-->
<!--密码S-->
<view class='login_userpass'>
<text class='text' decode='true'>新密码:</text>
<input class='input_pass' password='true' name='newuserpass' placeholder='请输入新密码'></input>
</view>
<!--密码E-->
<!--密码S-->
<view class='login_comuserpass'>
<text class='text' decode='true'>确认密码:</text>
<input class='input_compass' password='true' name='comnewuserpass' placeholder='请输入确认密码'></input>
</view>
<!--密码E-->
<!--登录按钮S-->
<view class='login_submit'>
<button class='btn_submit' form-type='submit' >确认修改密码</button>
</view>
</form>
<!--登录按钮E-->
<!--转到注册页面S-->
<view class='to_register'>
<navigator url='../index/index' hover-class='none'>不修改密码？去主页</navigator> </view>
<!--转到注册页面E-->
<!--水印S-->
<view class='express_footer'>
<text class='express_footer_text' decode='true'> www.itlaobing.com</text> </view>
</view>
modifypass.wxss
/* pages/modifypass/modifypass.wxss */
/* pages/modfiypass/modfiypass.wxss */
@import "../register/register.wxss";
.express_header{ width:100%; height:80rpx; line-height:80rpx; background-color: #00E3E3; text-align: center;}
.express_header_text{ margin: 0 auto; font-size: 35rpx; color:white; line-height:80rpx;}
.modify_express_logo{ width:100%; height: 235rpx; margin-top: 50rpx;}
userinfo界面
userinfo.js
// pages/sl_userInfo/sl_userInfo.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
avatarUrl: "",
nickName: "",
gender: "",
city: "",
province: ""
},
toindex: function (e) {
wx.navigateTo({
url: '../query/query',
}) },
/**
* 生命周期函数--监听页面加载
* */
onLoad: function (options) {
var that = this; //登录后显示微信头像
if (app.globalData.isLogin == true) {
var gender = "";
wx.getUserInfo({
//设置返回参数的语言
lang: 'zh_CN',
success: function (res) {
//console.log(res.userInfo);
gender = res.userInfo.gender;
if (gender == 0) {
gender = "未知";
};
if (gender == 1) {
gender = "男";
};
if (gender == 2) {
gender = "女";
};
//给个人信息赋值
that.setData({
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName,
city: res.userInfo.city,
province: res.userInfo.province,
gender: gender
});
}
})
}
},
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {
},
/** * 生命周期函数--监听页面显示 */ onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */ onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */ onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {
},
/** * 用户点击右上角分享 */ onShareAppMessage: function () {
}})
userinfo.wxml
<!--pages/userinfo/userinfo.wxml-->
<!--pages/sl_userInfo/sl_userInfo.wxml-->
<view class='modify_contain'>
<view class='express_header'>
<text class='express_header_text'>个人信息</text>
</view>
<!--logoS-->
<view class='modify_express_logo'>
<image class='userinfo-avatar' src="{{avatarUrl}}" background-size="cover" bindtap='userset'> </image>
<view class='logo_text1'>个人头像</view>
</view>
<!--logoE-->
<!--用户名S-->
<form bindsubmit='submit_modifypass'>
<view class='login_username'>
<text class='text'>昵称:</text>
<text class='text1'>{{nickName}}</text>
</view>
<!--用户名E-->
<!--密码S-->
<view class='login_userpass'>
<text class='text' decode='true'>性别:</text>
<text class='text1'>{{gender}}</text>
</view>
<!--密码E-->
<!--密码S-->
<view class='login_comuserpass'>
<text class='text' decode='true'>城市:</text>
<text class='text1'>{{city}}</text>
</view>
<!--密码E-->
<view class='login_comuserpass'>
<text class='text' decode='true'>省份:</text>
<text class='text1'>{{province}}</text> </view>
<!--登录按钮S-->
<view class='login_submit'>
<button class='btn_submit' bindtap='toindex'>返回主页</button> </view> </form>
<!--登录按钮E-->
<!--水印S-->
<view class='express_footer'>
<text class='express_footer_text' decode='true'> www.itlaobing.com</text>
</view><
/view>
userinfo.wxss
/* pages/userInfo/userInfo.wxss */
@import "../register/register.wxss";
.express_header{ width:100%; height:80rpx; line-height:80rpx; background-color: #00E3E3; text-align: center;}
.express_header_text{ margin: 0 auto; font-size: 35rpx; color:white; line-height:80rpx;}
.modify_express_logo { display: flex; flex-direction: column; align-items: center;}
.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; }
.text1{ width:70%; text-align: left; padding-left: 60rpx; font-size:35rpx; font-weight:500; color:#00E3E3; }
.logo_text1{ width:50%; margin: 0 auto; text-align: center; font-size: 30rpx; font-weight: 500; color: #00E3E3; }
还有一个log那个也是自动生成的，记录登陆情况，一般说不用管那个文件。
这些只是前端设计部分，要完成任务还需要后台服务器Java脚本支持，那些个功能是通过接口实现的，接口是我们这人家写好的，暂时只能用人家写好的，在代码中也可以看到接口部分 wx.request({ url: ‘https://www.itlaobing.com/express/weixinmodfiypass.do’, 就类似这种，好像是通过返回一个json串判断功能是否实现 ， 有兴趣同学可以新建项目尝试着看一下，后端代码也有，我会再写篇文章贴出我当时电脑端做的几个页面代码和后端的Java脚本，以上这些你只要没写错基本的都可实现的。
题外话 ：以前在学校不好好学，以至于去实习公司了什么都不会，又翻回来培训说实话这是一件很闹心的事情，我觉得只要认真了没有什么难的事情，难的是你下不了决心去认真起来，曾经我也觉得难也想过放弃这种东西，但是自己学了这莫多年，放弃了又能做甚麽，我只是一个普通人，又没矿又没啥的，靠的只能是自己， 所以有学生看到这里一定要为自己的未来负责，在学校别再浪费时间了，错过了就真的没了还望珍惜，最近秋招感觉没机会走，说实话是真的闹心，最后打个小广告，西安云创动力培训就我感觉而言还行，有同学觉得自己想做这一行还欠缺的可以报班培训下的 ，至少在应届生招聘上简单的技术问题应该都能过的。此次就到这里吧，谢谢阅读。。。
扫一扫
5242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
