이 기사는 주로 Zhihu의 WeChat 미니 프로그램 버전을 처음부터 공유합니다. Zhihu의 WeChat 버전을 개발하고 더 많은 아이디어를 얻는 데 도움이 되기를 바랍니다.
디스플레이 효과(인터페이스 스타일 디자인 및 상호 작용은 iOS 4.8.0 버전 Zhihu 앱에서 따옴):
동적 효과를 보려면 GitHub로 이동하세요.
1. 시작 전 준비
계정 신청: 미니 프로그램 등록 서류에 따라 정보를 입력하고 해당 자료를 제출하면 나만의 미니 프로그램 계정을 가질 수 있습니다.
개발 도구: WeChat 개발자 도구
데이터 출처:
Easy Mock: 데이터 시뮬레이션 결과물로 필요한 형식에 따라 반환 데이터를 작성할 수 있으며 모든 데이터는 무작위로 생성됩니다.
Mock.js: Easy Mock은 Mock.js를 도입하지만 문서에는 구문의 일부만 제공됩니다. 자신만의 모의 데이터를 보다 간결하게 작성하려면 Mock.js에서 더 구체적인 구문을 볼 수 있습니다.
2. 미니 프로그램 초기화
새 빈 폴더 만들기
WeChat 개발자 도구를 열고 "첫 번째 미니 프로그램" 문서의 단계를 따라 나만의 미니 프로그램을 만드세요.
디렉터리 구조
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이 사용되므로 미니 프로그램 관리 백그라운드 개발 설정에서 요청 법적 도메인 이름을 https://www.easy-mock으로 구성할 수 있습니다. -서버 도메인 이름 .com.
3. 개발 중 발생한 문제 및 해결 방법
1. 미니 프로그램은 HTML 조각을 렌더링합니다.
Zhihu의 웹 버전을 읽은 후 인터페이스에서 반환된 답변 데이터는 HTML 코드 조각이므로 답변은 어떤 삽입물에도 있을 수 있습니다. 가능한 한 사진.
네 맞아요 아래 보라색이에요 (╯°□°)╯︵┻━┻
여러 번 시도한 끝에 기본 작성 방법이 HTML 코드 조각 렌더링을 지원하지 않는 것을 발견하여 포기했습니다 HTML 코드 조각을 반환하는 방법이므로 내 답변 목록에 그림(ಥ_ಥ)이 없습니다.
하지만 조사 중에 사용자 정의 구성 요소를 찾았습니다: wxParse-WeChat 애플릿 서식 있는 텍스트 구문 분석 구성 요소는 아직 시도하지 않았습니다.
2. 홈페이지 상단에서 탭 전환구현 아이디어클릭 가능한 각 탭을 별도로 data-index에 바인딩하고, 클릭한 탭의 인덱스 값을 가져옵니다. 가장 바깥쪽의 바인드탭 바인딩 방식으로, 그리고 인덱스를 기준으로 값은 각각 해당 탭 내용을 표시합니다<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>전체 페이지는 다음과 같습니다. 
<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>텍스트 부분에 기본적으로 클래스를 추가하면 텍스트 두 줄 이상으로 줄임표가 표시됩니다.
.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;
}四、总结
通过这次小程序的开发，学到了很多东西，虽然遇到了很多问题，但解决问题的过程让我收获的更多，动手实践才是学习的最好方式。
相关推荐：
위 내용은 Zhihu 예제 공유의 WeChat 미니 프로그램 버전의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
