微信小程序开发实训记录（一）

学校的压迫下，三天开发一个小程序。作品做的不太好，但是对于基本界面的编写及数据交互算是有了一些了解，做一下记录。

一、首页的实现

首页主要解决了轮播图、横向平分布局、以及页面跳转相关问题。

二、代码实现介绍

wxml部分

  <!--index.wxml-->
<view class="top" >  <swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">    <block wx:for="{{imgUrls}}"  >      <swiper-item>        <image src="{{item}}" class="slide-image" />      </swiper-item>    </block>  </swiper></view><view class="button_list">  <view class="AQ" >    <image src="../img/qa.png" bindtap="passQuery" data-index="1" ></image>  </view>  <view class="AQ">    <image src="../img/shi.png" bindtap="passQuery" data-index="2"></image>  </view>  <view class="AQ">    <image src="../img/ge.png" bindtap="passQuery" data-index="3"></image>  </view></view><view class="button_list">  <view class="AQ">    小听问答  </view>  <view class="AQ">    <label>诗情乐意</label>  </view>  <view class="AQ">    <label>藏乐阁</label>  </view></view><view style="margin-left:3px;font-size:35rpx">每日推荐</view><view class="music_list">  <view class="ml" >    <image src="http://47.100.192.102/f1.png" bindtap="tomusic" data-index="1" ></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f2.png" bindtap="tomusic" data-index="2"></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f3.png" bindtap="tomusic" data-index="3"></image>  </view></view><view class="music_list">  <view class="ml" >    <image src="http://47.100.192.102/f4.png" bindtap="tomusic" data-index="4" ></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f5.png" bindtap="tomusic" data-index="5"></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f6.png" bindtap="tomusic" data-index="6"></image>  </view></view>
<!--index.wxml-->

js部分，主要和data相关


//index.js//获取应用实例const app = getApp()
Page({  data: {     imgUrls: [      '../img/1.jpg',      '../img/2.jpg',      '../img/3.jpg',      '../img/4.jpg',      '../img/5.jpg',      '../img/6.jpg'    ],      indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000  },passQuery: function (e) {// 传递的参数let query = e.currentTarget.dataset['index'];    if(query==1){      wx.navigateTo({        url: '../anwser/anwser',      })    }else if(query==2){      wx.navigateTo({        url: '../poem/poem',      })    }else{      wx.navigateTo({        url: '../lib/lib',      })    }},  tomusic:function(e){    // 全局定义    let query = e.currentTarget.dataset['index'];    app.data.id = query;    wx.navigateTo({      url: '../listen/listen',    })    }
})

wxss 部分

/**index.wxss**/.top{    width: 100%;  height:400rpx; }.top image{  width: 100%;  height: 100%;}.button_list{  display: flex;  align-items: center;  width: 100%;  flex-direction: row;  padding-top: 5rpx;
}
.button_list image{    width: 120rpx;  height: 120rpx;  vertical-align:top;}
.AQ{  width: 120rpx;  height: 120rpx;  text-align: center;  flex:1;  font-size: 35rpx;}.music_list{  display: flex;  align-items: center;  width: 100%;  flex-direction: row;  margin-top: 10rpx;}.music_list image{    width: 90%;  height: 220rpx;  vertical-align:top;}.ml{  width: 90%;  height: 220rpx;  text-align: center;  flex:1;}
/**index.wxss**/

需要注意的点

首页实现中，下面的每日推荐涉及到跳转后传值。采用了全局变量的改变来实现这一点。

微信小程序开发实训记录（一）相关推荐

2022-2023第一学期微信小程序期末实训报告
2022-2023第一学期微信小程序期末实训报告微信小程序小程实训报告 2022-2023第一学期微信小程序期末实训报告前言一.微信小程序简介二.微信小程序布局三.微信小程序实现,分页面展示 ...
微信小程序开发采坑记录1
问题1: 在微信小程序开发过程中,在获取userinfo或其他异步处理函数的过程中采用this碰到一些问题,问题如下: 我的login的success回调函数如下: success: function ...
微信小程序开发（学习记录1.0）
首先,把遇到的问题贴出来,主要是这个解决问题的思路,供大家参考. 现在的问题是将下面的导航栏做出来,但是在自己做的时候遇到的问题在app.json文件中输入tarBar,就会生成模板代码,默认会生 ...
微信小程序开发记录一，开发工具的使用
工欲善其事,必先利其器. 开发工具的下载> 1.微信开发者工具的下载: 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/downl ...
微信小程序开发学习记录01
微信小程序结构根目录 app.js:小程序逻辑文件(必须) app.json:小程序配置文件(必须) app.wxss:全局公共样式文件(非必须) pages 组成小程序的多个页面,每个页面都有: ...
基于Python Django框架后端的微信小程序开发
刚做完一个股票信息服务类的微信小程序(小程序名字"博股论基",大家有兴趣可以搜一下),也有一些心得,在这里记录一下开发过程,算是个开发笔记,同时也希望能给需要的同学一些帮助. -- ...
微信小程序开发15 项目实战基于云开发开发一个在线商城小程序
在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识.在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序开发步骤+底部菜单栏制作
微信小程序开发环境准备第一,需要准备一个微信开发者账号. 如果还没有开发者账号,需要到微信开公众平台申请一个账号.网址:微信公众平台注册一个小程序的开发者账号填写未被微信公众号注册过的邮箱. ...

微信小程序开发实训记录（一）

一、首页的实现

二、代码实现介绍

需要注意的点

微信小程序开发实训记录（一）相关推荐

最新文章

热门文章

微信小程序开发实训记录（一）

一、 首页的实现

二、代码实现介绍

需要注意的点

微信小程序开发实训记录（一）相关推荐

最新文章

热门文章

一、首页的实现