2019-07-16 16:01:16 weixin_44268473 阅读数 2629
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信小程序语法写(view、swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果。

效果图:

微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件)

<style type="less" scoped="scoped">
   .swiper image {
      width: 100%;
      height: auto;
  }

    .swiper-image {
      height: 100%;
      width: 100%;
    }

    .slide-image {
      height: 100%;
      width: 100%;
      display: block;
    }
</style>
<template>
     <view class="swiper">
        <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}"
            style="height:{{imgheights[current]}}rpx;">
            <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image">
               <swiper-item>
                    <image src="{{image.img}}" data-id="{{index}}" class="slide-image" mode="widthFix" bindload="imageLoad" />
               </swiper-item>
             </block>
         </swiper>
     </view>
</template>
<script>
  import wepy from '@wepy/core'
  wepy.page({
    data: {
      circular: true,
      //是否显示画板指示点,根据图片数量自动生成多少个圆点
      indicatorDots: true,
      //选中点的颜色
      //是否竖直
      vertical: false,
      //是否自动切换
      autoplay: true,
      //自动切换的间隔
      interval: 3000,
      //滑动动画时长毫秒
      duration: 1000,
      //所有图片的高度
      imgheights: [],
      //图片宽度
      imgwidth: 320,
      //默认
      current: 0
    },
    imageLoad: function(e) { //获取图片真实宽度
      var imgwidth = e.detail.width,
        imgheight = e.detail.height,
        //宽高比
        ratio = imgwidth / imgheight;
      console.log(imgwidth, imgheight)
      //计算的高度值
      var viewHeight = 750 / ratio;
      var imgheight = viewHeight;
      var imgheights = this.data.imgheights;
      //把每一张图片的对应的高度记录到数组里
      imgheights[e.target.dataset.id] = imgheight;
      this.setData({
        imgheights: imgheights
      })
    },
    bindchange: function(e) {
      // console.log(e.detail.current)
      this.setData({
        current: e.detail.current
      })
    }
  })
</script>

将代码粘过去之后,只需要修改循环对象为图片数据就可以了。

2016-10-13 21:38:47 qq_31383345 阅读数 82713
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.


上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

<!--index.wxml-->  
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
      <block wx:for="{{movies}}" wx:for-index="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
    </swiper>  
这里有几个属性需要说明.


微信小程序开发的循环用到了<block wx:for >

我这里是遍历movies[]数组.<swiper-item>就是item

2.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    movies:[  
    {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
    {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
    ]  
  },  
  onLoad: function () {  
  }  
})  

3.WXML

/**index.wxss**/
.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}

WXSS不多说,跟CSS没啥区别.

不明白的看看开发文档

http://blog.csdn.net/qq_31383345

2019-10-18 21:37:14 Q_MingTao 阅读数 17
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

微信小程序—轮播、定义模板、调用模板
作者:邱名涛
撰写时间:2019 年10 月18日
使用工具:微信开发者工具

1、在父目录里创建一个子目录作为模板,新建.wxml和.wxss
wxml代码:

<!--定义模板template名称name=""-->
<template name="Datas">
   <view class="articlelist">
    <view class="author-time">
      <image class="author-icon" src="{{authorIcon}}"></image>
      <text class="author-name">{{authorName}}</text>
      <text class="author-date">{{authorDate}}</text>
      <!--解释:三个点的意思
      {
      "authorName":"Wsp"
      },
      {{...item}}==Js文件(useData: newsData.initData)
      is==指定子目录的模板名称
      -->
    </view>
    <text class="title">{{title}}</text>
    <image class="article-img" src="{{articleImg}}"></image>
    <text class="article-text">{{articleText}}</text>
   <view class="article-like">
      <image class="article-like-icon" src="../assets/img/6.png"></image>
      <text class="article-like-text">{{articleLikeSe}}</text>
      <image class="article-like-icon" src="../assets/img/7.png"></image>
      <text class="article-like-text">{{articleLikeComment}}</text>
    </view>
  </view>
</template>

wxss代码:

/* 文章样式 */

.articlelist {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 10px;
  padding-bottom: 5px;
}

/* 显示时间 */

.author-time {
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}

/* 微信用户头像 */

.author-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: middle; /*上下垂直居中 */
}

.author-name {
  margin-left: 20rpx;
}

.author-date {
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}

/* 标题名称 */

.title {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

/* 文章图片(居中显示) */

.article-img {
  margin-left: 16px;
  width: 100%;
  height: 340rpx;
  margin: auto 0;
  margin-bottom: 15px;
}

/* 文章内容 */

.article-text {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  letter-spacing: 2rpx; /* 两个字的间距*/
  line-height: 40rpx;
}

.article-like {
  font-size: 13px;
  flex-direction: row; /* 水平布局*/
  line-height: 16px;
}

.article-like-icon{
  height: 16px;
  width: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.article-like-text{
  vertical-align: middle;
  margin-right: 20px;
}

2、然后引入lunbo-template模板路径。并且用is绑定引用进来的模板名称
wxml代码:

<!--引入模板文件lunbo-template.wxml-->
<import src="lunbo-template/lunbo-template.wxml" />
<view class="news-container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}">
    <swiper-item>
      <image src="../assets/img/8.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="../assets/img/9.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="../assets/img/10.jpg"></image>
    </swiper-item>
  </swiper>
  <block wx:for="{{useData}}" wx:for-item="item" wx:key="key">
  <!--  
  1、初始化调用
  item={
        "newsid": 1,
        "authorIcon": "../assets/img/11.png",
        "authorName": "Wsp",
        "authorDate": "2019/10/10",
        "title": "愿时光待你如初",
  },
  2、使用data="{{...item}}"定义
  {{...item}}==>  "newsid": 1,
                    "authorIcon": "../assets/img/11.png",
                    "authorName": "Wsp",
                    "authorDate": "2019/10/10",
                    "title": "愿时光待你如初",
  3、使用==> newsid
            authorIcon
            authorName
            authorDate
            title
  -->
    <template is="Datas" data="{{...item}}" />
  </block>
</view>

wxss代码:

/* @import"...";引入模板css样式 */
@import "lunbo-template/lunbo-template.wxss";

/* 轮播样式 */
.news-container{
  background-color: #f1f1f1;
}
.news-container swiper {
  width: 100%;
  height: 400rpx;
}

.news-container swiper image {
  width: 100%;
}

在这里插入图片描述

2019-07-07 17:11:36 qq_44921435 阅读数 40
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

简易上手

暑期实训,刚接触微信小程序,一脸懵,在等待老师发项目源码的间隙想看看轮播图怎么搞,没想到百度了一下还挺简单,五分钟搞定吧!!啊哈哈哈

具体操作

1、将图片存储至项目目录下

这里说明,微信开发者工具是不支持将电脑本地图片直接加载到目录下的,所以我们可以

新建目录-image 选择硬盘打开,然后将图片直接存在目录下即可。

2、wxml代码

根据官方文档 轮播图使用swiper组件,这里注意图片路径的填写;

<swiper class='lunbo'>
<swiper-item><image src='../../image/1.jpg'></image></swiper-item>
<swiper-item><image src='../../image/2.jpg'></image></swiper-item>
<swiper-item><image src='../../image/3.jpg'></image></swiper-item>
<swiper-item><image src='../../image/4.jpg'></image></swiper-item>
</swiper>

3、wxss代码

为了使图片适应屏幕宽度,为其设置样式

.lunbo{
 height:450rpx;
  width:100%;
}
.lunbo image{
  width:100%;
}

indicator-dots=“true” autoplay=“true” interval=‘4000’

4、自动播放

在wxml添加代码

<swiper class='lunbo' indicator-dots="true" autoplay="true" interval='4000'>

完毕!!!

2019-07-10 09:45:26 qq_40072583 阅读数 56
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

微信小程序写轮播图,在微信开发者文档中,已经给了我们组件容器<swiper>,我们把需要轮播的东西放到<swiper>下的<swiper-item>中。

附上微信开发者文档的网址:https://developers.weixin.qq.com/miniprogram/dev/api/

下面废话不多说,上代码!!!

<view class="lunbo">
<swiper class="swip" indicator-dots="true" autoplay="true" interval="4000" circular="false">
<swiper-item><image src="https://ledc-1251087221.file.myqcloud.com/upload/2017/04/20/20170420052458113.jpg"></image></swiper-item>
<swiper-item><image src="https://ledc-1251087221.file.myqcloud.com/upload/2017/04/20/20170420052458207.jpg"></image></swiper-item>
<swiper-item><image src="https://ledc-1251087221.file.myqcloud.com/upload/2017/04/20/20170420052458725.jpg"></image></swiper-item>

</swiper>
</view>

效果如下:

在这里插入图片描述

注意:(1)interval------是自动切换间隔. (2)circular------是否采用衔接播放,我们一般都是否,否者它会播放到最后一个时突然返回到第一个,出现视觉不美观。(3)vertical------是轮播是否纵向播放,一般默认的是水平左右播放。

别的不一一列举了,不懂得看上方网址!!!

没有更多推荐了,返回首页