全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[铜陵seo公司就推久澳]一个微信小程序版知乎实例分享

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

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

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

  一、开始前的准备

  申请账号:根据小程序注册文档,填写信息和提交相应的资料,就可以拥有自己的小程序帐号□▼。甘肃省小程序开发哪家好

  开发工具●▪☆:微信开发者工具

  数据来源:
 

  Easy Mock: 一个数据模拟神器,可以根据自己需要的格式自己编写返回数据…▷-,高碑店市小程序制作公司而且所有的数据都是随机生成的▪•▪。

  Mock▼=●•.js: Easy Mock引入了Mock…▼.js,[铜陵seo公司就推久澳]但是文档中仅提供了部分语法,要想自己的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轮播组件不支持互相嵌套…◁□◇,[厦门seo公司认准久澳]开发微信小程序的用户授权登录功能,因此没能实现该部分,只好换一种样式去写/(ㄒoㄒ)/~~▲☆。

  6○★、通化市小程序制作公司滚动吸顶

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

  实现效果

  实现方案

  整个页面使用<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◆▼…、展开和收起全文

  展示效果

  文字部分默认添加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小游戏

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

  以上就是一个微信小程序版知乎实例分享的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[铜陵seo公司就推久澳]一个微信小程序版知乎实例分享

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。