当前位置： 首页 > news >正文

“小红书”——给你一记安利

news 来源：原创 2024/5/5 11:36:48

微信小程序

写在前面

  小程序发布至今已有一年多时间，很多人都已经在小程序道路上狂奔。最近我也开始了学习小程序，学了一段时间后，想看看这段时间的学习效果，于是边学习边开始了我的第一个小程序。相信很多人都用过小红书吧，我可是被它安利了很多好东西呢，所以想着就仿写一个小红书的微信小程序吧。下面我就给大家“安利”几个我在写的过程中的“坑”。
  因为花的时间不多，功能有很多没有完善，页面写的不是很好看，请各位将就着看啦。╮(╯▽╰)╭   

准备工作

  1. 开发环境：WXML(HTML),WXSS(CSS),Javascript
  2. 开发工具：vscode，微信开发者工具
  3. 辅助工具：
  • Markman：图标标注工具，可用于取色、测量。
  • Easy-Mock：可以伪造假数据，在js中引用就好了。点这里可以查看我的项目数据。
  • Markdown：在线编辑器
  • GifCam：Gif录制工具 
  • 微信小程序开发文档
  • Iconfont-阿里巴巴矢量图标库：各种需要的小图标都有哦

遇到的几个问题

1、首页导航栏左右滑动

效果图：

  这部分，是通过微信小程序的 scroll-view组件来完成的。代码如下： 

<scroll-view class="navBar-box" scroll-x="true" style="white-space: nowrap; display:flex ">
    <view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{category}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
        {{item.name}}
    </view>
</scroll-view>
复制代码

  scroll-x="true"是设置其水平方向滑动，如果要设置垂直方向滑动，则使用scroll-y="true"。这里要注意的是，使用横向滚动时，需要给一个固定宽度，同理，竖向滚动则要设置固定高度。导航列表的每一项一定要设置宽度，其所有项的总宽度要小于scroll-view的宽度，否则列表项会垂直排列。因为导航列表项的个数比较多，这里使用了wx:for循环将列表项循环出来。这样减少了很多代码量，真是个好东西φ(゜▽゜*)♪
   一些使用scroll-view的注意事项：

  • 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  • scroll-into-view 的优先级高于 scroll-top
  • 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
  • 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

2、首页文章列表随着点击导航栏列表改变

效果图：

  这部分，是通过微信小程序的 swiper组件来完成的。代码如下： 

<swiper class="notes" current="{{toView}}">
  <swiper-item class="category" wx:for="{{detail}}"
  wx:key="{{item.id}}">
    <scroll-view class="cate-box" id="{{item.id}}" scroll-y>
     <-- 文章列表内容 -->
      <view class="note" wx:for="{{item.notes}}" wx:for-item="notes" wx:key="{{index}}">
        <view class="note-info">      
          <navigator url="../index/note-info/note-info" >
            <view class="home-note-img">
              <image src="{{notes.note_image}}"/>
            </view>
            <span>{{notes.title}}</span>
          </navigator>
        </view> 
        <!-- 作者信息 -->
        <view class="note-handle">
          <navigator class="writer" url="../index/note-writer/note-writer">
            <image class="photo-img" src="{{notes.writer_img}}"/>
            <span class="name">{{notes.writer}}</span>
          </navigator>
          <view class="like">
            <image class="like-icon" src="/images/like.png"/>
            <span>{{notes.like}}</span>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
</swiper>
复制代码

  使用swiper组件，将所有文章列表包起来，每个swiper-item表示不同的列表模块。之前在导航栏各列表项绑定了不同的值，在点击导航时触发switchCategory事件，swiper-item根据导航点击的不同值，展示相对应的item文章列表。在这里我使用了Easy-Mock将页面的数据放在里面，然后用wx:request请求数据就行了。

// 请求数据
wx.request({
  url: 'https://www.easy-mock.com/mock/5b1e17a0d4a14a3247a6cd6b/',
  success: (res) => {
    this.setData({
      detail: res.data.data
    })
  }
})  
复制代码

  通过wx:for循环，将每个文章页内容获取过来。在swiper-item里面使用scroll-view，使得页面可以滚动。

  内容超出一屏的时候，文章列表右边就会出现滚动条，这样也太丑了吧。那如何能让这个滚动条不出现呢，那就是让它隐藏掉。通过在全局样式中设置scroll隐藏,这样就好看多了。 

::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;   // 透明
}
复制代码

  

3、搜索页面的历史记录

  在搜索框中输入要搜索的内容后，输入的内容会增加到历史记录里面。这里我用 wx：for循环historyRecord，index值区分不同的搜索内容，recordItem是要输出在历史记录的值。代码如下： 

<view class="search-history">
    <text class="history-record">历史记录</text>
    
    <view class="search-history-item" wx:for="{{historyRecord}}" wx:key="{{index}}">    
        <text>{{item.recordItem}}</text>
    </view>
</view>
复制代码

  因为文章的详情页还没有写，所以输入搜索内容后弹出的相似内容后，按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 -->
<picker bindchange="bindaddressChange" value="{{addressValue}}" range="{{addressRange}}">
    <view class="weui-select weui-select_in-select-after" name="adress">{{addressRange[addressValue]}}</view>
复制代码
//  js 设置初始值
 data: {
    addressValue: 0,   //地址下标
    addressRange: ["北京市","江西省", "湖南省", "上海市","湖北省","浙江省", "福建省", "重庆市"],
  },
</picker>
复制代码

  但是这块地方，表单验证及添加地址信息提交到地址列表中，有让我一阵子头疼。
  首先就是表单验证，当你提交表单时触发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)。

总结

  以上便是我觉得比较容易掉坑，比较难的地方。还有很多没有完成的功能，后续我会慢慢完善。对于小程序这方面，完全还是新手，给跟我一样的新手的一个建议，除了看微信小程序开发文档之外，也可以多看一看开源的小程序项目源码，遇到问题，可以看看别人是怎么解决的。各个社区也是很好的平台，可以将问题发布出来，大家一起解决。
 

  本文如果有不好的地方，或者更好的方法，欢迎大佬们指出，一起学习。
   本文为个人原创，如果你想对我的项目想要了解更多，可以查看我的项目源码。希望这篇文章对你有帮助，欢迎大家点赞收藏~~

相关文章：

  • MFC:树形控件
  • Thrift版本管理
  • 【译】Angular自动取消订阅
  • Blog-05-《一周快速上手Kotlin For Android》-之Broadcast用法
  • pandas 打开没有列名的表格，并命名
  • KVOController代码分析和踩坑
  • Shell命令 中|| 使用
  • 针对ASP.NET Core Web API的先进架构
  • plsql 表中字段及注释时为乱码
  • BAT脚本编写教程入门提高篇
  • 时间序列异常检测算法S-H-ESD
  • docker实战
  • Hive 部署
  • Openstack 之 Prometheus 监控
  • python3 异步模块asyncio
  • .pyc 想到的一些问题
  • 《Java8实战》-第四章读书笔记（引入流Stream）
  • 2019年如何成为全栈工程师？
  • CentOS7 安装JDK
  • ES6系统学习----从Apollo Client看解构赋值
  • JavaScript实现分页效果
  • java概述
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • Shell编程
  • Spark VS Hadoop：两大大数据分析系统深度解读
  • VuePress 静态网站生成
  • Webpack 4 学习01（基础配置）
  • 阿里中间件开源组件：Sentinel 0.2.0正式发布
  • 简单基于spring的redis配置(单机和集群模式)
  • 简析gRPC client 连接管理
  • 力扣(LeetCode)22
  • 码农张的Bug人生 - 见面之礼
  • 融云开发漫谈：你是否了解Go语言并发编程的第一要义？
  • 深入浏览器事件循环的本质
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 收藏好这篇，别再只说“数据劫持”了
  • ​如何防止网络攻击？
  • ###C语言程序设计-----C语言学习（6）#
  • #单片机（TB6600驱动42步进电机）
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (07)Hive——窗口函数详解
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • （第61天）多租户架构（CDB/PDB）
  • （二十三）Flask之高频面试点
  • （附源码）springboot建达集团公司平台 毕业设计 141538
  • （附源码）springboot码头作业管理系统 毕业设计 341654
  • （含react-draggable库以及相关BUG如何解决）固定在左上方某盒子内（如按钮）添加可拖动功能，使用react hook语法实现
  • （机器学习-深度学习快速入门）第三章机器学习-第二节：机器学习模型之线性回归
  • （学习日记）2024.03.25：UCOSIII第二十二节：系统启动流程详解
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • .NET 除了用 Task 之外，如何自己写一个可以 await 的对象？
  • .net 使用ajax控件后如何调用前端脚本
  • .NET牛人应该知道些什么(2)：中级.NET开发人员