浅谈电子商务网站建设与管理的理解,怎么样自己建设网站,wordpress的媒体库图片不显示,国产软件开发平台微信目录集链接在此#xff1a;
详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰
不会导入/打开小程序的看这里#xff1a;参考
让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择啥是轮播图轮播…微信目录集链接在此
详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰
不会导入/打开小程序的看这里参考
让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择啥是轮播图轮播图的关键代码最常见的轮播图代码便于理解但是不能用于后台的轮播代码 知识点复习swiper 前端页面代码相应的JS文件 PHP后端phpStudy设置后端代码启动后端编译前端 这全套的活一整套下来配套资源作业 本系列校训
用免费公开视频卷飞培训班哈人打死不报班赚钱靠狠干 只要自己有电脑前后项目都能搞N年苦学无人问一朝成名天下知
学习资源的选择
黑马程序员微信小程序开发前端教程_零基础玩转微信小程序130集 https://www.bilibili.com/video/BV1nE41117BQ/ 目录如下 … P303-微信小程序的环境准备08:21 00:00 到 0516 获取APPid, 后面下载开发工具。
啥是轮播图 基本上只要你看到的网站90%以上都会看到轮播图轮播如此重要基本上成了网站的必备的模块甚至有一些页面里面也大量出现轮播 小程序上呢也是一样毕竟小程序大概率也是一种商业的网站。当然也得要使用轮播了
轮播图的关键代码
最常见的轮播图代码
swiper classswiper_box autoplay{{autoplay}} interval{{interval}} duration{{duration}} bindchangeswiperchangecircularcircularblock wx:for{{banners}} wx:keyidswiper-itemimage bindtaptapBanner data-id{{item.businessId}} src{{item.picUrl}}_m classslide-image //swiper-item/block/swiper这是一般的小程序最常见的轮播图代码段。
便于理解但是不能用于后台的轮播代码
swiper classcontent-info-slide indicator-colorrgba(255,255,255,.5) indicator-active-color#fff indicator-dots circular autoplayswiper-itemimage src/images/banner.jpg //swiper-itemswiper-itemimage src/images/banner.jpg //swiper-itemswiper-itemimage src/images/banner.jpg //swiper-item/swiper第一种是万能型即可以做静态的纯前端也可以后端定制比如说你的小程序轮播图需要后台人员更换图片
知识点复习
首先一点如果你对小程序还是属于ABC阶段还是强列推荐看《让小程序动起来-轮播图的两种方式–【浅入深出系列003】》 这不是好不好的问题而是初学者是不是更容易接受的问题。数学虽好也不能在小学开设微积分。物理虽棒也没有在初中就讲量子力学。
swiper
具体请参见官方文档《微信官方文档. 小程序》 swiper一节 swiper 基础库 1.0.0 开始支持低版本需做兼容处理。
微信 Windows 版支持
微信 Mac 版支持
渲染框架支持情况Skyline 使用最新 Nighly 工具调试、WebView
功能描述 滑块视图容器。其中只可放置swiper-item组件否则会导致未定义的行为。 通用属性 属性 类型 默认值 必填 说明 最低版本 indicator-dots boolean false 否 是否显示面板指示点 1.0.0 indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0 indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0 autoplay boolean false 否 是否自动切换 1.0.0 current number 0 否 当前所在滑块的 index 1.0.0 interval number 5000 否 自动切换时间间隔 1.0.0 duration number 500 否 滑动动画时长 1.0.0 circular boolean false 否 是否采用衔接滑动 1.0.0 vertical boolean false 否 滑动方向是否为纵向 1.0.0 display-multiple-items number 1 否 同时显示的滑块数量 1.9.0 easing-function string “default” 否 指定 swiper 切换缓动动画类型 2.6.5 合法值 说明 default 默认缓动函数 linear 线性动画 easeInCubic 缓入动画 easeOutCubic 缓出动画 easeInOutCubic 缓入缓出动画 bindchange eventhandle 否 current 改变时会触发 change 事件event.detail {current, source} 1.0.0 bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件event.detail {dx: dx, dy: dy}。Skyline 仅支持非 worklet 的组件方法作为回调。 2.4.3 bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件event.detail 同上。Skyline 仅支持非 worklet 的组件方法作为回调。 1.9.0 前端
页面代码
!--pages/home/home.wxml--
block wx:for{{listData}} wx:keyitemlist!-- 菜单轮播图 --swiper indicator-dots{{indicatorDots}} autoplay{{autoplay}} interval{{interval}} duration{{duration}}block wx:for{{item.imgUrls}} wx:for-itemimgItem wx:key{{item.id}}swiper-itemimage classslide-image src{{imgItem.src}}/image/swiper-item/block/swiper!--开启点餐之旅 --view classmenu-barview classmenu-block bindtapgostartview classmenu-start开启点餐之旅→/view/view/view!-- 中间部分 --view classad-boximage src{{item.image_ad}} classimage-ad/image/view!-- 底部商品图 --view classbottom-boxview classbottom-pic wx:for{{item.image_bottom}} wx:for-itembottomItem wx:key{{item.id}}image src{{bottomItem.src}} classbtm-image data-id{{bottomItem.id}}/image/view/view
/block这个页面只看 swiper 部分。有以下几个绑定的变量
indicatorDotsautoplayintervaldurationitem.imgUrls 而在wx:for-item 里使用的是imgItem.src
相应的JS文件
很容易的就找到了 前四个参数都是只有一个简单值。 整个代码如下
// pages/home/home.js
const fetch require(../../utils/fetch.js)
Page({data: {// 显示面板指示点indicatorDots: true,// 图片自动切换autoplay: true,// 自动切换时间间隔interval: 5000,// 滑动动画时长duration: 1000},onLoad: function(options) {// 显示模态对话框wx.showLoading({title: 努力加载中})// 请求数据fetch(food/index.json).then((res) {// 请求成功关闭对话框wx.hideLoading();// 把接口返回数据setData给listDatathis.setData({listData: res.data,})},() {// 请求失败关闭对话框执行fetch.js文件中的fail方法wx.hideLoading();});},gostart: function() {wx.navigateTo({url: ../list/list,})}
})重点来了。当页面loLoad的时候跟html差不多的意思 Ctrl 鼠标点击事实上很多的工具都是这样的跟踪代码的方式 找到fetch函数。 可以找到一段ES6的JS写法这也是为什么不推荐初学者直接使用复杂例子的原因。看不动一改N个错那还怎么学习 不得不流下伤心而又无奈的泪水。IT的程序员门槛貌似很低但是从理解代码的角度上从来不是各专业TOP比啥啥电子的与非门比啥啥信号的频域傅立叶变换都难很多。 啥你都没听说过 呃其实我也啥都没说只说加油奥利给 友情提示 可以使用资源管理器里的搜索功能真的很好用。
PHP后端
其实这个后端只是一个轮播图的话springboot, Jsp, PHP都差不多。 但是我还是打算写成不同的文章 一个原因是学PHP的不一定有我这么全才的嘛 另一个原因就是这样看上去水三篇文章是不是感觉上要好很多经验加1一下子变成了
phpStudy设置
因为只有图片以及无数据支持的PHP页面所以就不用数据库的设置部分讲解了。
后端代码
打开目前排名第一的MSCode然后第一步。先不要管代码找一个颜色主题换换心情。今天玩玩深蓝深情系。 玩的省事一点。 直接扔一个JSON文件 在PHP环境里。这里要对URL说明一下其实这并一定就是一个真实的文件也不一定是对应一个servlet 。事实上这种URL叫统一资源 文字流图片字节码游戏的协议包等等PHP算是最简化的开发也是网上所说的低代码开发 因特网上的可用资源可以用简单字符串来表示该文档就是描述了这种字符串的语法和语义。而这些字符串则被称为“统一资源定位器”URL。这篇说明源于万维网全球信息主动组织World Wide Web global informationinitiative介绍的概念。RFC1630《通用资源标志符》描述了一些对象数据他们自1990年起就开始使用这些对象数据。 从根本上来说低代码带来的直接效益就是降本增效。低代码作为一种可视化的软件开发方法可以通过最少的手工编码更快地交付应用程序。基于低代码平台的图形用户界面和拖放功能自动化了开发过程的各个方面消除了对传统计算机编程方法的依赖这使得企业能减少相应的研发人员需求和研发时长使其成本得到了极大降低。 随着计算机性能的不停提升随着IT开发人力成本的逐步提高低代码肯定就是越来越香。 至于python 算啥 这个真的难回答只能说从计算机语言的角度上叫高级语言。而Python语言更适合低代码开发平台。但是你说那机器学习包呢
启动后端编译前端
我用的是phpStudy 2018 跟小P的区别在PHP的文章里有提
这全套的活一整套下来
这不得整个大鸡腿
配套资源
后端 小程序轮播图的两种后台方式(PHP)-php https://download.csdn.net/download/dearmite/88109851 前端 小程序轮播图的两种后台方式(PHP)-小程序 https://download.csdn.net/download/dearmite/88109860
作业
学会了你就已经是神
