首页 微信小程序 小程序开发 一个微信小程序版知乎实例分享

一个微信小程序版知乎实例分享

Jan 25, 2018 pm 01:51 PM
分享 实例 小程序

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

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

a.jpg

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

一、开始前的准备

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

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

数据来源:

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

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

二、初始化一个小程序

新建一个空文件夹

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

目录结构

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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判断当前页面滚动距离是否达到要求,如果达到所需距离,则渲染这个吸顶的标题栏。

1

2

3

4

5

6

&lt;view class=&quot;find-hot-header fixed&quot; wx:if=&quot;{{scrollTop &gt;= 430}}&quot;&gt;

   &lt;view class=&quot;find-hot-title&quot;&gt;最近热门&lt;/view&gt;

&lt;/view&gt;

&lt;view class=&quot;find-hot-header&quot;&gt;

    &lt;view class=&quot;find-hot-title&quot;&gt;最近热门&lt;/view&gt;

&lt;/view&gt;

登录后复制

7、展开和收起全文

展示效果

c.jpg

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

1

2

3

4

5

6

7

8

9

.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。

1

2

3

4

5

&lt;view class=&quot;find-hot-content {{!showIndex[index] ? &#39;text-overflow&#39; : &#39;&#39;}}&quot;&gt;

    {{item.content}}

&lt;/view&gt;

&lt;view wx:if=&quot;{{!showIndex[index]}}&quot; class=&quot;find-show-all&quot; data-index=&quot;{{index}}&quot; bindtap=&quot;toggleShow&quot;&gt;展开全文&lt;/view&gt;

&lt;view wx:if=&quot;{{showIndex[index]}}&quot; class=&quot;find-show-all&quot; data-index=&quot;{{index}}&quot; bindtap=&quot;toggleShow&quot;&gt;收起全文&lt;/view&gt;

登录后复制

8、更改switch样式

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

父类 .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小游戏

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

以上是一个微信小程序版知乎实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

夸克网盘怎么分享到百度网盘? 夸克网盘怎么分享到百度网盘? Mar 14, 2024 pm 04:40 PM

夸克网盘怎么分享到百度网盘?

网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程

百度网盘怎么分享文件给好友 百度网盘怎么分享文件给好友 Mar 25, 2024 pm 06:52 PM

百度网盘怎么分享文件给好友

芒果tv会员账号分享2023 芒果tv会员账号分享2023 Feb 07, 2024 pm 02:27 PM

芒果tv会员账号分享2023

实现微信小程序中的卡片翻转特效 实现微信小程序中的卡片翻转特效 Nov 21, 2023 am 10:55 AM

实现微信小程序中的卡片翻转特效

uniapp如何实现小程序和H5的快速转换 uniapp如何实现小程序和H5的快速转换 Oct 20, 2023 pm 02:12 PM

uniapp如何实现小程序和H5的快速转换

分享惠普打印机驱动的两种安装方法 分享惠普打印机驱动的两种安装方法 Mar 13, 2024 pm 05:16 PM

分享惠普打印机驱动的两种安装方法

小程序备案怎么操作 小程序备案怎么操作 Sep 13, 2023 pm 04:36 PM

小程序备案怎么操作

See all articles