English
资源说明：“小红书”——给你安利几个小程序的“坑”微信小程序写在前面 小程序发布至今已有一年多时间，很多人都已经在小程序道路上狂奔。最近我也开始了学习小程序，学了一段时间后，想看看这段时间的学习效果，于是边学习边开始了我的第一个小程序。相信很多人都用过小红书吧，我可是被它安利了很多好东西呢，所以想着就仿写一个小红书的微信小程序吧。下面我就给大家“安利”几个我在写的过程中的“坑”。 因为花的时间不多，功能有很多没有完善，页面写的不是很好看，请各位将就着看啦。╮(╯▽╰)╭ 准备工作 1. 开发环境：WXML(HTML),WXSS(CSS),Javascript 2. 开发工具：vscode，微信开发者工具 3. 辅助工具：Markman：图标标注工具，可用于取色、测量。Easy-Mock：可以伪造假数据，在js中引用就好了。点这里可以查看我的项目数据。Markdown：在线编辑器GifCam：Gif录制工具 微信小程序开发文档Iconfont-阿里巴巴矢量图标库：各种需要的小图标都有哦遇到的几个问题1、首页导航栏左右滑动效果图： 这部分，是通过微信小程序的scroll-view组件来完成的。代码如下：
{{notes.writer}}
历史记录
{{item.recordItem}}
因为文章的详情页还没有写，所以输入搜索内容后弹出的相似内容后，按enter键触发bindconfirm事件，使用wx.navigateTo直接跳回了搜索页面，之前输入的搜索内容就会增加到历史记录里面。bindconfirm: function(e){
var recordItem = e.detail.value;
this.saveHistory({
id: 0,
recordItem
})
wx.navigateTo({ //跳转到搜索页面
url: '../searchbar/searchbar',
})
this.setData({
searchContext:''
})
},4、收货地址的添加 使用微信小程序提供的表单组件，很快就将添加地址的页面做好了。值得一提的就是picker。 picker：从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。它的一些属性，可点击查看picker。<!-- wxml -->
{{addressRange[addressValue]}}// js 设置初始值
data: {
addressValue: 0, //地址下标
addressRange: ["北京市","江西省", "湖南省", "上海市","湖北省","浙江省", "福建省", "重庆市"],
},
但是这块地方，表单验证及添加地址信息提交到地址列表中，有让我一阵子头疼。 首先就是表单验证，当你提交表单时触发formSubmit事件，对表单进行验证。如果未输入内容或者输入内容格式有误，通过wx.showModal()给用户提示。代码如下：formSubmit: function(e){
var warn = "";
var that = this;
var flag = false;
if(!e.detail.value.name){ //判断输入内容
warn = "请填写收件人！";
} else if(!e.detail.value.tel){
warn = "请填写手机号码！";
} else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
warn = "手机号码格式不正确！";
} else if(!e.detail.value.adress){
warn = "请选择地区！";
} else if(!e.detail.value.doorAdress){
warn = "请填写详细地址！";
} else if(!e.detail.value.IDcard){
warn = "请填写身份证号码";
} else if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(e.detail.value.IDcard)){
warn = "身份证号码格式不正确"
} else{
flag=true;
// 存储到全局变量adressInfo
app.globalData.adressInfo.push(e.detail.value);
wx.navigateTo({
url: '/pages/my/adress/adress'
})
}
if(flag==false){
wx.showModal({
title: '提示',
content:warn
})
}
},添加地址信息提交到地址列表中，这部分要怎么解决呢？我一开始的思路是，将添加的地址信息存在本地，然后在地址列表那获取添加的地址信息。这样就不得不提下wx.setStorage( )和wx.getStorage( )这两个方法了。wx.setStorage()：将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。wx.getStorage()：从本地缓存中异步获取指定 key 对应的内容。 wx:getStorage是从本地缓存中异步获取指定 key 对应的内容。Key指定了，所以再添加的地址就会覆盖原来的key对应的内容，从而得不到保存地址的效果，只有一条数据。//添加地址信息到本地缓存 add-adress.js
submitdate: function (event) {
var adressInfo = event.detail.value;
wx.setStorage({
key: 'adressInfo',
data: adressInfo,
success: function (res){
wx.navigateTo({
url: '/pages/my/adress/adress'
})
}
})
},
//地址列表里获取缓存在本地的地址信息 adress.js
var that=this;
wx.getStorage({
key:'adressInfo',
success:function(res){
console.log(res);
var adressInfo=[];
adressInfo.push(res.data);
that.setData({
adressInfo
})
}
})于是呢，就去请教了几位大佬，看有什么方法可以解决这个问题。经过讨论，得出了解决办法：将添加的地址信息push到全局上去，然后再从全局里面获取，这样就不会将之前的数据覆盖。而且这样处理，代码量大大的减少了。 代码如下：// 定义globalData对应的全局变量 app.js
globalData: {
userInfo: null,
adressInfo:[]
}
// 提交地址信息，调用定义的变量 add-adress.js
submitdate: function (event) {
app.globalData.adressInfo.push(event.detail.value);
wx.navigateTo({
url: '/pages/my/adress/adress'
})
console.log(app.globalData.adressInfo);
},
//获取地址信息,调用定义的变量 adress.js
var that=this;
that.setData({
adressInfo:app.globalData.adressInfo
})注意：需要在调用全局变量的文件里，开始的时候初始化app这个对象const app = getApp();5、Easy-Mock数据接口的引入问题 使用Easy-Mock伪造数据时，一定要书写规范，我在这里踩的"坑"就是：数据属性名，不能包含“-”（比如：note-image）。这样虽然数据接口能够创建，但是引入的时候就会报错，引入的数据为空。数据属性名可以用“_”（比如：note_image)。总结 以上便是我觉得比较容易掉坑，比较难的地方。还有很多没有完成的功能，后续我会慢慢完善。对于小程序这方面，完全还是新手，给跟我一样的新手的一个建议，除了看微信小程序开发文档之外，也可以多看一看开源的小程序项目源码，遇到问题，可以看看别人是怎么解决的。各个社区也是很好的平台，可以将问题发布出来，大家一起解决。 本文为个人原创，如果你想对我的项目想要了解更多，可以查看我的项目源码。希望这篇文章对你有帮助，欢迎大家点赞收藏~~ 本文如果有不好的地方，或者更好的方法，欢迎大佬们指出，一起学习。 wx：lj13684809399
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
