结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
line-height: 60rpx;
border-bottom: 1px solid #efefef;
height: 60rpx;
}
.menu > view:last-child {
border: none;
}
.arrow {
width: 30rpx;
height: 32rpx;
float: right;
margin-top: 16rpx;
}
4. 主页/pages/detail/ detail实现代码
4.1 detail.js代码
// pages/detail/detail.js
Page({
data: {
gender: ‘女’,
username: ‘xiaoyuer’,
imgUrl: “/images/avatar.jpg”
},
changeAvatar: function() {
wx.chooseImage({
count: 1,
sizeType: [‘original’, ‘compressed’],
sourceType: [‘album’, ‘camera’], success: res => {
// tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
this.setData({
imgUrl: tempFilePaths
})
}
})
},
jump: function(e) {
// 跳转到“个人资料修改页”
wx.navigateTo({
// 为了避免用户名中的特殊字符破坏字符串结构，使用encodeURIComponent()编码
url: ‘/pages/modify/modify?username=’ + encodeURIComponent(this.data.username) +
‘&gender=’ + encodeURIComponent(this.data.gender)
})
}
})
4.2 detail.json 代码
{
“navigationBarTitleText”: “个人资料详情页”
}
4.3 detail.wxml代码
头像
昵称 {{username}}
性别 {{gender}} 修改资料
4.4 detail.wxss代码
/* pages/detail/detail.wxss */
page {
background-color: #f4f4f4;
font-size: 32rpx;
}
.info > view {
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20rpx;
line-height: 80rpx;
border-bottom: 1px solid #efefef;
height: 80rpx;
}
.info > view:last-child {
border: none;
}
.fl {
flex: 1;
}
.rl {
flex: 1;
text-align: right;
}
.info image {
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
}
.info .arrow {
width: 30rpx;
height: 32rpx;
float: right;
margin: 26rpx 0 0 15rpx;
}
- 主页/pages/modify/ modify 实现代码
5.1 modify.js代码
// pages/modify/modify.js
Page({
data: {
username: ‘’,
gender: ‘男’
},
onLoad: function(options) {
this.setData({
// 收到数据后使用decodeURIComponent()解码
username: decodeURIComponent(options.username),
gender: decodeURIComponent(options.gender)
})
},
formSubmit: function(e) {
// 表单返回的所有数据
var formData = e.detail.value
// 获取上一个页面的对象
var pages = getCurrentPages()
var prevPage = pages[pages.length - 2]
// 调用上一个页面的 setData() 方法，把数据存到上一个页面中去
prevPage.setData({
username: formData.username,
gender: formData.gender
})
// 返回到上一个页面
wx.navigateBack()
}
})
5.2 modify.json 代码
5.3 modify.wxml代码
姓名： 性别：
男
女 保存
5.4 modify.wxss代码
6. 主页/pages/order/ order实现代码
6.1 order .js代码
// pages/order/order.js
Page({
data: {
no: null, // 运单号
company: [‘sf’, ‘sto’, ‘yt’, ‘yd’, ‘tt’], // 传递给快递查询接口的值
com: [‘顺丰’, ‘申通’, ‘圆通’, ‘韵达’, ‘天天’], // 用于显示在页面中的快递名称
index: 0, // 用户选择的快递公司的数组索引
expressInfo: null, // 查询到的物流信息
},
search: function() {
wx.showLoading({
title: ‘加载中’,
})
// 在 https://www.juhe.cn/docs/api/id/43 注册后可申请数据，将获得的接口填入url
// key值在个人中心-我的数据，可获取AppKey
var key = ‘’
wx.request({
url: ‘http://v.juhe.cn/exp/index?key=’ + key + ‘&com=’ +
this.data.company[this.data.index] + ‘&no=’ + this.data.no, method: ‘GET’,
header: {
‘content-type’: ‘application/json’ // 默认值
},
success: res => {
console.log(res.data);
this.setData({
expressInfo: res.data
})
wx.hideLoading()
}
})
},
// 获取运单号的值
noInput: function(e) {
this.setData({
no: e.detail.value
})
},
// 获取快递公司的索引
companyInput: function(e) {
this.setData({
index: e.detail.value
})
}
})
6.2 order .json 代码
{
“navigationBarTitleText”: “物流信息”
}
6.3 order.wxml代码
欢迎进入快递查询系统
请选择快递公司：
{{com[index]}}
运单号：
查询
【{{item.datetime}}】
{{item.remark}}
6.4 order.wxss代码
/* pages/order/order.wxss */
.container {
padding: 20rpx;
}
.container > .title {
text-align: center;
}
button {
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
margin: 30rpx auto;
}
.section {
width: 100%;
box-sizing: border-box;
margin-top: 80rpx;
overflow: hidden;
}
.section > .title {
width: 20%;
float: left;
font-size: 28rpx;
text-align: right;
line-height: 42rpx;
}
.section > .input {
border: 1px solid gainsboro; width: 70%;
padding: 5rpx 10rpx;
float: right;
font-size: 32rpx;
}
.orderlist {
height: 300px;
}
.orderlist view {
border-bottom: 1px solid #efefef;
font-size: 32rpx;
padding: 10rpx 0;
}
.orderlist text {
color: red;
font-size: 28rpx;
}
7. 主页/pages/address/ address实现代码
7.1 address.js代码
// pages/address/address.js
Page({
data: {
addressInfo: null
},
chooseAddress() {
wx.chooseAddress({
// 成功之后，把所有数据存放在addressInfo里，在wxml中调用
success: res => {
this.setData({
addressInfo: res
})
},
// 接口返回失败信息，打印在控制台中
fail: err => {
console.log(err)
}
})
}
})
7.2 address.json 代码
7.3 address.wxml代码
收货人姓名 {{ addressInfo.userName }} 邮编 {{ addressInfo.postalCode }} 地区 {{ addressInfo.provinceName }} {{ addressInfo.cityName }} {{ addressInfo.countyName }} 收货地址 {{ addressInfo.detailInfo }} 国家码 {{ addressInfo.nationalCode }} 手机号码 {{ addressInfo.telNumber }}
获取收货地址
7.4 address.wxss代码
page {
background-color: #f6f6f6;
font-family: “微软雅黑”;
font-size: 30rpx;
color: #353535; }
.list {
font-size: 36rpx;
}
.list > view {
background-color: #fff;
padding: 20rpx;
border-bottom: 1rpx solid #e0e0e0;
display: flex;
}
.list .head {
width: 210rpx;
}
.list .body {
flex: 1;
}
.add {
width: 100%;
background-color: #fff;
position: absolute;
bottom: 0;
padding: 15rpx 15rpx 30rpx 40rpx;
border-top: 1rpx solid #e0e0e0;
}
.add > image {
width: 50rpx;
margin-top: 15rpx;
margin-right: 20rpx;
}
.add > .left {
float: left;
}
.add > .right {
width: 25rpx;
float: right;
margin-right: 60rpx; padding-top: 15rpx;
color: #e0e0e0;
}
ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
ps://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
