最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 一个微信小程序版知乎实例分享_小程序开发教程


    本文主要和大家分享从零开始一个微信小程序版知乎,希望能帮助大家开发一个微信版知乎,从中也有更多思路。

    展示效果(界面样式设计与交互来自iOS 4.8.0版本知乎App):

    a.jpg

    动态效果请移步到GitHub查看。

    一、开始前的准备

    申请账号:根据小程序注册文档,填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

    开发工具:微信开发者工具

    数据来源:

    Easy Mock: 一个数据模拟神器,可以根据自己需要的格式自己编写返回数据,而且所有的数据都是随机生成的。

    Mock.js: Easy Mock引入了Mock.js,但是文档中仅提供了部分语法,要想自己的mock数据写的更精简,可以在Mock.js中查看更多具体语法。

    二、初始化一个小程序

    新建一个空文件夹

    打开微信开发者工具,按照“你的第一个小程序”文档中的步骤即可创建一个自己的小程序。

    目录结构

    weChatApp
    |___client
    |	|___assets // 存储图片
    |	|___pages  	// 页面
    |	|	|___index // 首页
    |   |	|___index.wxml  // 页面结构文件
    |	|	|___index.wxss  // 样式表文件
    |	|	|___index.js    // js文件
    |	|___utils // 全局公共函数
    |	|___app.js   // 系统的方法处理文件
    |	|___app.json // 系统全局配置文件
    |	|___app.wxss // 全局的样式表
    |	|___config.json // 域名等配置文件
    |___project.config.json
    |___README
    小程序配置文件app.json内容
    {
    // 页面路由
       "pages": [
           "pages/index/index",              // 首页
           "pages/findMore/findMore",        // 想法页(开始起名为发现页面,后来没改/(ㄒoㄒ)/~~)
           "pages/userCenter/userCenter",    // 更多(同上,原来起名为个人中心o(╯□╰)o)
           "pages/market/market",            // 市场
           "pages/searchResult/searchResult",// 搜索结果页
           "pages/message/message",          // 消息列表页
           "pages/titleDetail/titleDetail",  // 点击标题进入的问题详情页
           "pages/contentDetail/contentDetail"// 点击内容进入的回答详情页
       ],
       // 窗口
       "window": {
           "backgroundColor": "#FFF",       // 窗口的背景色  
           "backgroundTextStyle": "dark",   // 下拉背景字体、loading 图的样式,仅支持 dark/light
           "navigationBarBackgroundColor": "#FFF",// 顶部tab背景颜色
           "navigationBarTitleText": "知小乎", //顶部显示标题
           "navigationBarTextStyle": "black", // 导航栏标题颜色,仅支持 black/white
           "enablePullDownRefresh": true      // 是否开启下拉刷新
       },
       // tab导航条
       "tabBar": {
           "backgroundColor": "#fff",  // 背景颜色
    "color": "#999",            // 默认文字颜色
           "selectedColor": "#1E8AE8", // 选中时文字颜色
           "borderStyle": "white",     // tabbar上边框的颜色, 仅支持 black/white
           
           /** 
           * tab列表,最少2个,最多5个
       * selectedIconPath: 选中时图片
       * iconPath: 默认图片
       * pagePath: 对应页面路由
       * text: 对应文案
       **/
           "list": [{
               "selectedIconPath": "assets/home-light.png",
               "iconPath": "assets/home.png",
               "pagePath": "pages/index/index",
               "text": "首页"
           }, {
               "selectedIconPath": "assets/find-light.png",
               "iconPath": "assets/find.png",
               "pagePath": "pages/findMore/findMore",
               "text": "想法"
           },
           {
             "selectedIconPath": "assets/market-light.png",
             "iconPath": "assets/market.png",
             "pagePath": "pages/market/market",
             "text": "市场"
           },
           {
             "selectedIconPath": "assets/msg-light.png",
             "iconPath": "assets/msg.png",
             "pagePath": "pages/message/message",
             "text": "消息"
           }, {
               "selectedIconPath": "assets/more-light.png",
               "iconPath": "assets/more.png",
               "pagePath": "pages/userCenter/userCenter",
               "text": "更多"
           }]
       }
    }

    配置接口域名: 因使用的是Easy Mock模拟接口数据,因此可以在小程序管理后台-开发设置-服务器域名中将request合法域名配置为https://www.easy-mock.com。

    三、开发中的遇到的问题及解决方案

    1、小程序渲染HTML片段

    看了网页版知乎,接口返回的回答数据是一段HTML的代码片段,所以答案中可以在任意位置都插入图片。
    对,没错,就是下面酱紫的(╯°□°)╯︵┻━┻

    经过反复尝试,发现原生写法不支持渲染一段HTML代码片段,因此放弃了返回HTML的代码片段的做法,所以我的回答列表中也没有图片(ಥ_ಥ)。

    但在调研中发现了一个自定义组件:wxParse-微信小程序富文本解析组件,还没尝试使用,准备在下次优化项目时尝试一下。

    2、首页的顶部tab切换

    实现思路

    每个可点击的tab分别绑定data-index,在最外层bindtap绑定的方法中获取所点击的tab的index值,再根据index的值分别显示对应的tab-content

    <view class="tab-wrapper" bindtap="setActive">
            <view class="tab-item {{isActive == 0 ? 'tab-item-active' : ''}}" data-index="0">关注</view>
            <view class="tab-item {{isActive == 1 ? 'tab-item-active' : ''}}" data-index="1">推荐</view>
            <view class="tab-item {{isActive == 2 ? 'tab-item-active' : ''}}" data-index="2">热榜</view>
            <view class="tab-item-line" animation="{{animationData}}"></view>
    </view>
    <view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}">
     // ...
    </view>
    <view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}">
     // ...
    </view>
    <view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}">
     // ...
    </view>

    3、上拉加载和下拉刷新

    实现思路

    上拉加载:emmmmmm……我指的上拉加载是触底后的加载更多,怕跟大家理解的不一样o(╯□╰)o。

    原生方法:onReachBottom,获取到新数据后concat到原有的数据列表后。

    下拉刷新:

    原生方法:onPullDownRefresh,将原有的数据列表concat到获取到的新数据后。

    要注意的是,每次对数组进行操作后,都要使用setData对原数组重新赋值,否则数据不会更新的啊( ⊙ o ⊙ )!

    4、搜索历史的存储

    实现思路

    wx.setStorage、wx.getStorage和wx.removeStorage

    存储搜索历史:

    使用wx.setStorage,触发搜索时,检查搜索历史列表中是否含有该字段,如果有则忽略,如果没有则将该字段压入数组中。

    显示搜索历史:

    使用wx.getStorage,在显示搜索蒙层时,获取到搜索历史列表,循环显示,当搜索历史列表长度大于1时,显示清空搜索历史的按钮。

    删除搜索历史:

    单一删除:每个搜索历史都绑定删除事件,获取到改关键词的index,从渠道的搜索历史列表中删除对应index的关键词,并通过wx.setStorage重新存储。

    全部删除:使用wx.removeStorage,直接移除搜索历史对应的关键字。

    5、swiper轮播组件

    在想法页的轮播组件中,原知乎App中的xxxx人正在讨论是嵌在轮播模块内的垂直方向的文字轮播,但是小程序中的swiper轮播组件不支持互相嵌套,因此没能实现该部分,只好换一种样式去写/(ㄒoㄒ)/~~。

    6、滚动吸顶

    页面中的标题栏在滚动到顶部时,吸顶展示。

    实现效果

    b.jpg

    实现方案

    整个页面使用<scroll-view></scroll-view>包裹,并且绑定bindscroll事件,监听滚动距离。

    设置<scroll-view>为垂直方向时,需设置<scroll-view>的高度。

    复制一个相同的标题栏,添加吸顶样式的类fixed。

    使用wx:if判断当前页面滚动距离是否达到要求,如果达到所需距离,则渲染这个吸顶的标题栏。

    <view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}">
       <view class="find-hot-title">最近热门</view>
    </view>
    <view class="find-hot-header">
        <view class="find-hot-title">最近热门</view>
    </view>

    7、展开和收起全文

    展示效果

    c.jpg

    文字部分默认添加class,超出两行文字显示省略号。

    .text-overflow{
      height: 85rpx;
      display: -webkit-box;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:2;
    }

    点击展开全文和收起全文时对showIndex[index]的值取反,对应添加或移除该class。

    <view class="find-hot-content {{!showIndex[index] ? 'text-overflow' : ''}}">
        {{item.content}}
    </view>
    <view wx:if="{{!showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">展开全文</view>
    <view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view>

    8、更改switch样式

    switch类名如下,一定要加上父类,不然全局的都会被改掉_(:з」∠)_。

    父类 .wx-switch-input{
      display: inline-block;
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 84rpx;
      height: 44rpx;
    }
    父类 .wx-switch-input::before{
      width: 80rpx;
      height: 40rpx;
    }
    父类 .wx-switch-input::after{
      width: 40rpx;
      height: 40rpx;
    }

    四、总结

    通过这次小程序的开发,学到了很多东西,虽然遇到了很多问题,但解决问题的过程让我收获的更多,动手实践才是学习的最好方式。

    相关推荐:

    微信小程序组件化的解决思路和方法

    微信小程序版2048小游戏

    微信小程序之购物车的实现代码

    以上就是一个微信小程序版知乎实例分享的详细内容,更多请关注liyege.cn其它相关文章!

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1165会员总数(位)
    • 111858资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 243稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐