{{.}}

{{.}}

{{。喜欢}}

使用组件包裹所有的文章列表，每个-item代表不同的列表模块，之前在导航栏中每个列表项绑定不同的值，当点击导航时，触发事件-item根据导航点击的不同值显示对应的item文章列表，这里我使用Easy-Mock把页面数据放进去，然后使用wx:来请求数据。 // 请求数据

wx.({

网址:'#39;,

:(res)=>{

这。（{

:res.数据.数据

}）

}) 通过wx:for循环，获取每篇文章页面的内容。使用-item中的-view可以让页面可以滚动。当内容超过一屏时，文章列表的右侧会出现一个滚动条，太丑了。怎么才能让这个滚动条不出现呢？那就是隐藏它。通过在全局样式中将其设置为hide，这样会好看很多。 ::--{

：0；

：0；

：;//透明的

}3.搜索页面历史记录在搜索框中输入需要搜索的内容之后，输入的内容会加入到历史记录中，这里我使用了wx:for循环，值区分不同的搜索内容，就是将值输出到历史记录中，代码如下：

历史记录

{{物品。}}

因为文章详情页还没写，输入搜索内容后弹出相似内容，key触发事件，使用wx.直接跳转回搜索页，之前输入的搜索内容会加入到历史记录中。:(e){

=e..;

这。（{

ID：0，

}）

wx.({//跳转到搜索页面

网址:'..//',

}）

这。（{

：''

}）

},4.添加收货地址利用微信小程序提供的表单组件，快速完成添加地址的页面。值得一提的是：从底部弹出的滚动选择器现在支持五种选择器，通过模式来区分，分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。默认是普通选择器。点击可以查看它的一些属性。

{{[]}} //js设置初始值

数据：{

:0, //地址下标

:["北京","江西","湖南","上海","湖北","浙江","福建","重庆"],

}，

但是这个部分，表单验证以及在地址列表中添加地址信息，让我头疼了好一阵子。首先是表单验证，当你提交表单的时候，会触发一个事件来验证表单，如果没有输入内容或者输入内容的格式不正确，就会通过wx.()来提示用户。代码如下：(e){

=“”;

=这个；

=；

if(!e...name){//判断输入内容

warn="请填写收件人！";

}(!e...电话){

warn="请填写您的手机号码！";

}(!(/^1(3|4|5|7|8)\d{9}$/.test(e...电话))){

warn="手机号格式不正确！";

}(!e...){

warn="请选择地区！";

}(!e...){

warn="请填写详细地址！";

}(!e...){

warn="请填写您的证件号码";

}(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(e...)){

warn="身份证号码格式不正确"

}别的{

标志=真；

//存储在全局变量中

应用程序...推送（e..）；

wx.({

url:'//我的//'

}）

如果（标志==）{

wx.({

：'暗示'，

：警告

}）

}、添加地址信息并提交到地址列表中，这部分怎么解决呢？我最初的想法是将添加的地址信息存储到本地，然后从地址列表中获取添加的地址信息。这样就不得不提到wx.()和wx.()这两个方法。 wx.(): 在本地缓存中存储指定key的数据，会覆盖原来key对应的内容。这是一个异步接口。 wx.(): 异步从本地缓存中获取指定key对应的内容。 wx: 异步从本地缓存中获取指定key对应的内容。由于key是指定的，所以添加的地址会覆盖原来key对应的内容，这样就起不到保存地址的效果，数据只有一条。 //将地址信息添加到本地缓存 add-.js

:(){

=..;

wx.({

钥匙：''，

数据：，

:(res){

wx.({

url:'//我的//'

}）

}）

}，

//获取地址列表.js本地缓存的地址信息

=这个；

wx.({

钥匙：''，

:(res){

.log（res）；

=[];

.推送（res.数据）；

那。（{

}）

}) 于是，我去请教了几个高手，看看有没有什么办法可以解决这个问题。经过讨论，大家想出了一个解决办法：把添加的地址信息推送到全局，然后再从全局获取，这样就不会覆盖之前的数据了。而且这样一来，代码量就大大减少了。代码如下： //定义对应的全局变量app.js

：{

：无效的，

：[]

//提交地址信息，调用定义的变量add-.js

:(){

应用程序...推（..）；

wx.({

url:'//我的//'

}）

.log（应用程序..）；

}，

//获取地址信息并调用定义好的变量.js

=这个；

那。（{

：应用程序..

})注意：在文件中调用全局变量时，需要在开头初始化app对象=();5.引入Easy-Mock数据接口的问题使用Easy-Mock伪造数据时，需要写规范。这里我踩到的“坑”是：data属性名不能包含“-”（例如：note-）。这样虽然可以创建数据接口，但是引入的时候会报错，引入的数据为空。data属性名可以使用“_”（例如：）。综上所述，以上就是我认为容易掉坑的，比较难的。还有很多功能没有完成，以后会慢慢完善。对于小程序，我还是个新手，给像我这样的新手的一个建议是，除了看微信小程序开发文档，还可以看看开源的小程序项目源码，遇到问题可以看看别人是怎么解决的。各个社区也是一个很好的平台，可以发布问题，一起解决。 如果本文有不好的地方，或者更好的方法，欢迎大佬指出，一起学习。本文为原创，如果想进一步了解我的项目可以查看我的项目源码，希望本文对大家有所帮助。欢迎大家点赞收藏~~