微信小程序三个视图控件View、ScrollView、Swiper的解读及示例

微信小程序三个视图控件View、ScrollView、Swiper的解读及示例

微信小程序三个视图控件View、ScrollView、Swiper的解读及示例

关于微信小程序的视图控件,今天带给大家系统的解读和示范,相信看完后都可以轻松用好了。****首先看一下这个示例程序的运行效果。

大家可以看到,有三个视图,分别用不同的配置和使用方式。接下来我们具体展开来介绍。我们先新建一个项目,在首页添加三个****navigator导航按钮,分别跳转到对应的组件示范页面。

index页面的WXML代码如下:

<!--index.wxml-->
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
 
<view class="viewName">
<navigator url="Component/View/View">
<text class="view-Name">View组件示范</text>
</navigator>
</view>
<view class="viewName">
<navigator url="Component/ScrollView/ScrollView">
<text class="view-Name">Scroll-View组件示范</text>
</navigator>
</view>
<view class="viewName">
<navigator url="Component/Swiper/Swiper">
<text class="view-Name">Swiper组件示范</text>
</navigator>
</view>

index页面的JS代码如下:

var app = getApp()
Page({
data: {
motto: '基础视图View,滑动视图ScrollView,滑块Swiper',
userInfo: {}
},
 
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})

index页面的WXSS样式代码如下:

/**index.wxss**/
.usermotto {
margin-top: 30px;
font-size: 20px;
}
 
.viewName{
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
height: 50px;
font-size: 25px;
background-color: #AED2EE;
/**下面是设置三个view视图的文本内容上下左右居中**/
justify-content: center;
display: flex;
align-items: center;
}

另外我们要提醒一下,因为每个页面都会用到一些相同的样式,这样的情况下,可以把这些样式提取出来放在app.wxss文件中,作为公共样式。
本示例Demo中的公共样式如下,写在app.wxss中。

/**app.wxss**/
page {
background-color: #fbf9fe;
height: 100%;
}
/**在这里可以把整个小程序所有页面用到的公共样式放在这里,便于每个页面直接调用**/
.viewTitle{
margin-top: 20px;
height: 40px;
text-align: center;
}
.bc_green{
background-color: #09BB07;
}
.bc_red{
background-color: #F76260;
}
.bc_blue{
background-color: #10AEFF;
}
.bc_yellow{
background-color: #FFBE00;
}
.bc_gray{
background-color: #C9C9C9;
}

第一、基础视图View组件页面,页面截图如下:

View页面的WXML代码如下:

<!--View.wxml-->
<!--更多源码请于51小程序源码版块下载:[url]http://bbs.html51.com/f-36-1/-->[/url]
<view class="viewTitle">
    <text>View展示</text>
</view>
<!--样式一,横向排列-->
<view class="section">
    <view class="section__title">样式一,横向排列</view>
    <view class="flex-wrp">
        <view class="flex-item bc_green">111</view>
        <view class="flex-item bc_red">222</view>
        <view class="flex-item bc_blue">333</view>
    </view>
</view>
<!--样式二,竖向排列。下面的style="height:300px"样式,也可以在 .wxml的文件中进行样式设计-->
<view class="section">
    <view class="section__title">样式二,竖向排列</view>
    <view class="flex-wrp" style="height:300px">
<!--下面的view有2个class 一个是来之View.wxss文件定义的样式,一个是总的样式文件app.wxss定义的样式-->
        <view class="flex-item bc_green" style="margin-top: 0px">111</view>
        <view class="flex-item bc_red" style="margin-top: 100px">222</view>
        <view class="flex-item bc_blue" style="margin-top: 200px">333</view>
    </view>
</view>

View页面的WXSS代码如下:

/**View.wxss**/
.flex-wrp{
    height: 100px;
    display: flex;
    background-color: #ffffff;
}
/**
这里定义了一个样式,另外在总的小程序app.wxss中也可以定义通用的样式,可以应用到每个页面中。
**/
.flex-item{
    width: 100px;
    height: 100px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

因为这里是演示View组件,所有没有JS代码。效果,可以查看最顶部的动画效果图。第二、滑动视图组件页面的截图如下:

ScrollView页面的WXML代码如下:

<!--ScrollView.wxml-->
<view class="viewTitle">
    <text class="titleName">ScrollView视图展示</text>
  </view>
  <!--样式一,竖向滑动-->
<view class="section">
    <view class="section__title">样式一,竖向滑动Vertical</view>
    <view class="flex-wrp">
    <!--bindscrolltoupper后面的参数可以不写,在.js文件中
    有对应的交互方法-->
      <scroll-view scroll-y="true" style="height: 200px;"
      bindscrolltoupper="upper" bindscrolltolower="lower"
      bindscroll="scroll" scroll-into-view="{{toView}}"
      scroll-top="{{scrollTop}}">
      <!--这里的id用来js中找到对应的显示视图,如果不进行js中data的{{toView}}
      的数据交互,显示的是蓝黄红绿,如果进行js数据交互,那么初始化时显示的是
      最下面的绿-->
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="yellow"  class="scroll-view-item bc_yellow"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
</view>
<!--样式二,横向滑动-->
<view class="section">
    <view class="section__title">样式二,横向滑动Horizontal</view>
    <view class="flex-wrp">
    <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
      </scroll-view>
    </view>
</view>

ScrollView页面的JS代码如下:

//ScrollView.js
var order = ['green', 'red', 'yellow', 'blue', 'green']
Page({
})

ScrollView页面的WXSS代码如下:

/**ScrollView.wxss**/
/**更多源码请于51小程序源码版块下载:[url]http://bbs.html51.com/f-36-1/[/url]**/
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
.flex-wrp{
    height: 200px;
    display: flex;
    background-color: #ffffff;
}

此页面的效果,可以查看最顶部的动画效果图。第三、Swiper****视图组件页面的截图如下:

这样页面相对比较复杂,可以看到一个滑块视图,3个按钮控制不同的显示状态,另外2个滑动条,控制滑块视图切换时的快慢。具体如下代码和解读:Swiper页面的WXML代码如下:

<!--Swiper.wxml-->
  <view class="viewTitle">
    <text class="titleName">Swiper视图展示</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}"
        duration="{{duration}}">
        <block wx:for="{{background}}">
          <swiper-item>
            <view class="swiper-item bc_{{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="btn-area">
      <button type="default" bindtap="changeIndicatorDots">
      显示/取消指示点</button>
      <button type="default" bindtap="changeVertical">
      {{vertical?'横显示':'竖显示'}}</button>
      <button type="default" bindtap="changeAutoplay">
      开始/停止轮播</button>
    </view>
    <slider bindchange="durationChange" value="{{duration}}"
    show-value min="200" max="2000"/>
    <view class="section__title">轮播一次的时间duration</view>
    <slider bindchange="intervalChange" value="{{interval}}"
    show-value min="1000" max="10000"/>
    <view class="section__title">间隔多长时间显示下一个图interval</view>
  </view>

Swiper页面的JS代码如下:

//Swiper.js
Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,    //布尔值变量,用于控制显示/取消指示点
    vertical: false,        //根据这个布尔值的真假,控制滑块视图,横显示或者竖显示
    autoplay: false,        //通过这个开关控制,是否开始轮播,或者停止轮播
    interval: 3000,         //设置间隔多长时间显示下一个图
    duration: 1200          //设置轮播一次的时间
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

Swiper页面的WXSS代码如下:

/**Swiper.wxss**/
.swiper-item{
  display: block;
  height: 150px;
}

基本整个项目代码都在这里了。大家可以看一下。当然如果希望下载源码运行后看效果的话。

作者:微信51小程序
链接:https://www.jianshu.com/p/9b9d443bcd3b
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

微信小程序的详细登录(上)

微信小程序的详细登录(上)

//app.js
// 这里是调用公共函数库
var util = require(‘./utils/util.js’)
App({

/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function (options) {

// 调用API从本地缓存中获取数据
var that = this
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)

},

/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {

var that = this,
// scenes是场景值它的类型是整形
scenes = options.scene,
// sid是参数,建议兼容ios和android的时候强转换为整形
sid = Number(options.query.sid)

// 获取用户信息
that.getUserInfo(function (userInfo) {
// 判断场景是否是从公众号进入(这里的意思是如果用户从公众号的自定义菜单进入的话且参数sid为1的话触发什么方法)
// 获取场景值在onLaunch方法中也可以获取到,但是呢由于业务要求我们的这个方法需要用户进入就会触发
// 各位可以根据需求去决定在哪里获取合适一些,onLaunch是小程序未关闭的情况下只执行一次,所以各位一定要考虑清楚
if (scenes === 1035 &amp;&amp; sid === 1) {
// 这里是从什么场景下要执行的方法
}
})
},

/**
* 获取用户信息
*/
getUserInfo: function (cb) {
var that = this

if (this.globalData.userInfo) {

typeof cb == “function” &amp;&amp; cb(this.globalData.userInfo)

} else {

// 调用登录接口
wx.login({
success: function (res) {

// 登录成功
// 在这里登录的时候会返回一个登录凭证,以前是发送一次请求换一个,现在好像是登录凭证有5分钟的有效时间
// 从这种情况来看微信小程序的发展还是不错的,以前估计没多少人访问,现在访问量上去后后台的布局都重新架构了
var code = res.code// 登录凭证

// 获取用户信息
wx.getUserInfo({
// 当你获取用户信息的时候会弹出一个弹框是否允许授权

// 这里点击允许触发的方法
success: function (res2) {

that.globalData.userInfo = res2.userInfo

// 准备数据(下面的这些参数都是必须参数,请不要问为什么,看文档去吧)
var data = { encryptedData: res2.encryptedData, iv: res2.iv, code: code }

// 请求自己的服务器(在这里我结合promise封装了一下request请求,下面会把方法给大家分享一下)
util.commonAjax(‘方法名’, 1, data)
.then(function (resolve) {
// 这里自然不用解释了,这是接口返回的参数
if (resolve.data.status === ‘200’) {
// 成功
wx.setStorageSync(‘userInfo’, resolve.data.data)
// 新手们注意一下,记得把下面这个写到这里,有好处。
typeof cb == “function” &amp;&amp; cb(that.globalData.userInfo)
} else {
// 失败
}
})
},

// 这里是点击拒绝触发的方法
fail: function (res2) {
// 在这里做一下兼容,有些同行业的用户会点击拒绝玩一玩看你们的小程序是否存在bug,
// 所以在这里还是加上下面这两行代码吧,打开微信小程序的设置,允许小程序重新授权的页面
wx.openSetting({
success: (res) =&gt; {
// 下面的代码格式按照我的写,不要看工具打印的什么,在这里提醒大家一句,有时候不能相信开发者工具,因为
// android和ios还有工具底层的js库是不同的,有些时候坑的你是一点脾气也没有,所以大家注意一下,
// 不相信的慢慢的去自己跳坑吧
if (res.authSetting[“scope.userInfo”]) {
// 进入这里说明用户重新授权了,重新执行获取用户信息的方法
that.getUserInfo()
}
}
})
}
})
}
})
}
},

/**
* 全局变量配置(在这里放一些常量和配置文件,如果公共参数多的话大家也可以去重新布局一个文件,在里面进行设置)
*/
globalData: {
userInfo: null,
url: ‘这是接口的url’
}
})

// 下面是util.js的东西

/**
* request请求封装
* url 传递方法名
* types 传递方式(1,GET,2,POST)
* data 传递数据对象
*/
function commonAjax(url, types, data) {

// 获取公共配置
var app = getApp()

// 公共参数(一般写接口的时候都会有些公共参数,你可以事先把这些参数都封装起来,就不用每次调用方法的时候再去写,)
var d = {
token: ‘123456789’,// 例如:这是我们自己的验证规则
}

// 合并对象(公共参数加传入参数合并对象) mergeObj对象在下面
var datas = mergeObj(d, data)

// 这是es6的promise版本库大概在1.1.0开始支持的,大家可以去历史细节点去看一下,一些es6的机制已经可以使用了
var promise = new Promise(function (resolve, reject, defaults) {
// 封装reuqest
wx.request({
url: app.globalData.url + url,
data: datas,
method: (types === 1) ? ‘GET’ : ‘POST’,
header: (types === 1) ? { ‘content-type’: ‘application/json’ } : { ‘content-type’:’application/x-www-form-urlencoded’},
success: resolve,
fail: reject,
complete: defaults,
})
});
return promise;
}

/**
* object 对象合并
* o1 对象一
* o2 对象二
*/
function mergeObj(o1, o2) {
for (var key in o2) {
o1[key] = o2[key]
}
return o1;
}

function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()

return [year, month, day].map(formatNumber).join(‘/’) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:’)
}

function formatNumber(n) {
n = n.toString()
return n[1] ? n : ‘0’ + n
}

module.exports = {
formatTime: formatTime,
commonAjax: commonAjax,
}

网页网站建设中wordpress标签代码

网页网站建设中wordpress标签代码

 WordPress 基本模板文件

一套完整的WordPress 模板应至少具有如下文件:

* style.css : CSS( 样式表) 文件

* index.php : 主页模板[separator]

* archive.php : Archive/Category 模板

* 404.php : Not Found 错误页模板

* comments.php : 留言/ 回复模板

* footer.php : Footer 模板

* header.php : Header 模板<!- -nextpage- ->

* sidebar.php : 侧栏模板

* page.php : 内容页(Page) 模板

* single.php : 内容页(Post) 模板

* searchform.php : 搜索表单模板

* search.php : 搜索结果模板

当然,具体到特定的某款模板, 可能不止这些文件, 但一般而言, 这些文件是每套模板所必备的。 阅读更多

wordpress网页设计中常用标签调用代码大全

wordpress网页设计中常用标签调用代码大全

WordPress模板基本文件

style.css 样式表文件

index.php 主页文件

single.php 日志单页文件

page.php 页面文件

archvie.php 分类和日期存档页文件

searchform.php 搜索表单文件

search.php 搜索页面文件

comments.php 留言区域文件(包括留言列表和留言框) 阅读更多

在正确的工具区域内显示创建的WordPress小工具

在正确的工具区域内显示创建的WordPress小工具

创建WordPress小工具的最后一步是在网站上显示其输出结果。要做到这一点,你需要进一步编写WP_Widget 类。

需要做的是

跟随本教程,需要

阅读更多

WordPress创建自己的第一个小工具

WordPress创建自己的第一个小工具

对于非程序员要创建一个WordPress站点,小工具是很棒的。它们能够添加菜单、列表供稿、文本以及更多东西到小工具区,并且不限于侧边栏。现在许多主题都在页脚添加了小工具区,并且大主题框架通常在多个位置设有小工具区,如头部或内容的上下方。

在这个五部分的系列教程中,我将带你一起完成创建您的第一个小工具所需的步骤。 阅读更多

微信小程序 简单教程实例详解-泉州网页设计培训

微信小程序 简单教程实例详解-泉州网页设计培训

刚接触到微信小程序开发,这里做一个简单的教程:
1. 获取微信小程序的 AppID
登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。

注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。 阅读更多