微信小程序实现“鲜肉APP”首页效果

╰半橙微兮° 2022-06-11 06:27 284阅读 0赞

> 项目地址[ ][Link 1][http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master][http_git.oschina.net_djcx_WeiXinXiaoChengXu_tree_master] 如果您觉得不错，记得给一个star

由于[微信小程序][Link 2]目前是当下趋势，正好昨天弄到了破解版[微信web开发工具][web]，所以今天正好试试手。由于我是做[iOS][]的，所以对H5和CSS方面不太了解，代码里面写的丑的地方欢迎吐槽。

## 1.效果演示 ##

![01110513_UwGd.gif][]

WXEXE.gif

## 2.微信小程序介绍 ##

微信小程序的一个页面主要分成三个部分.[js][]文件.wxml文件和.wxss文件

*  . js文件  
    .js文件相当于ios中的一个控制器，所有的业务逻辑操作都放在该文件中完成，xml页面中显示的数据都从该文件中传入。
 *  .wxml文件  
    .wxml文件用于写HTML5代码，也就是用来页面布局。
 *  .wxss文件  
    .wxss文件则是用来处理所有的css样式信息

## 3.代码介绍 ##

页面布局代码，由于开发工具的所有接口访问有限制，所以数据都写在了本地，但是最新的破解版开发工具已经处理的这个问题，我也会尽快将死数据改成网络请求下来的数据

class = "index">
         class = "header-container" >
        
         class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000">
           wx:for-items="{
         { adimages }}">
            
               class = "header-swiper-img" src="{
         { item.img_url }}" mode="aspectFill" >
            
          
         
    
         class = "header-search-img" src="../../images/icon_sshome.png">
    
        
    
        
         class = "scroll-container"> 
             wx:for="{
         { result }}" wx:for-index='index' wx:for-item='item'>
              
               class = "home-view-sep-ver" style = "float:left">
    
              
               class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
                   class = "header-cover-img" src = "{
         { item.cover }}" mode = "aspectFill"/>
                   class = "home-text-nickname" style = "float:left"> {
        { item.nickname }} 
                   class = "home-text-city" style = "float:left"> {
        { item.city_name }} 
              
    
              
               wx:if = "{
         { (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">
    
            
        
    
        
         class = "home-invite-container">
           class = "home-invite-title" > {
        { invite.title }} 
           class = "home-invite-cover" src = "{
         { invite.img_url }}" mode = "aspectFill" />
           class = "home-invite-content" style = "display: inline-block;" > {
        { invite.content }} 
           class = "home-invite-subcontent"  style = "display: inline-block;"> {
        { invite.subcontent }} 
        
    
        
         class = "scroll-container"> 
             wx:for="{
         { recommends }}" wx:for-index='index' wx:for-item='item'>
              
               class = "home-view-sep-ver" style = "float:left">
    
              
               class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
                   class = "header-cover-img" src = "{
         { item.cover }}" mode = "aspectFill"/>
                   class = "home-text-nickname" style = "float:left"> {
        { item.nickname }} 
                   class = "home-text-city" style = "float:left"> {
        { item.city_name }} 
              
    
              
               wx:if = "{
         { (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">

[Link 1]: https://github.com/Eastwu5788/WXAPP
[http_git.oschina.net_djcx_WeiXinXiaoChengXu_tree_master]: http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master
[Link 2]: http://9.cn/
[web]: https://github.com/gavinkwoe/weapp-ide-crack
[iOS]: http://lib.csdn.net/base/ios
[01110513_UwGd.gif]: https://static.oschina.net/uploads/img/201708/01110513_UwGd.gif
[js]: http://lib.csdn.net/base/javascript