微信小程序 - 效果入门篇

陆续补充 ~

前情重点

.js文件逻辑区域
.json文件是页面的配置文件，页面的配置文件是非必要的
.wxml文件 UI布局
.wxss文件页面的样式表，页面的样式表是非必要的

顶部Title

实现效果
实现方式

统一配置Title： app.json

//统一配置Title
    "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }

单对单配置Title：对应页面的 .json

  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "white",
  "navigationBarTextStyle": "black"

底部导航栏

实现效果
实现方式 app.json

 "tabBar": {
    "color": "#363636",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "iamges/ic_home.png",
        "selectedIconPath": "iamges/ic_selected_home.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/index",
        "iconPath": "iamges/ic_mes.png",
        "selectedIconPath": "iamges/ic_selected_dream.png",
        "text": "梦想"
      },
      {
        "pagePath": "pages/mine/index",
        "iconPath": "iamges/ic_mine.png",
        "selectedIconPath": "iamges/ic_selected_mine.png",
        "text": "我的"
      }
    ]
  }

api ：

color是底部字体颜色
selectedColor是切换到该页面高亮颜色，也称被选取颜色
borderStyle是切换菜单上面的一条线的颜色
backgroundColor是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象
list下的代码顺序必须依次放置，不能随便更改
pagePath之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀
iconPath为未获得显示页面的图标路径，这两个路径可以直接是网络图标
selectedIconPath为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「iconPath」的图标
text为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用

弹框

静态弹框

实现效果
在这里插入图片描述
实现方式
. wxml

<view clsas ="modalBox">
<button bindtap='showDialog'>静态弹框</button>
</view>

<!-- 静态提示框 -->
<modal title="提示" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirmClick" bindcancel="cancelClick">  
  是否确认提交？  
</modal>

. js

Page({
 /**
   * 页面的初始数据
   */
  data: {
  	//true:隐藏  false:展示
    modalHidden: true
  },

 //静态弹框事件
	showDialog() {
    this.setData({
      modalHidden: false
    });
  },
 //弹框 - 确定事件
    confirmClick() {
    this.setData({
      modalHidden: true
    })
  },
 //弹框 - 取消事件
  cancelClick: function() {
    this.setData({
      modalHidden: true
    })
  }
})

动态创建弹框 (扩展性更强)

实现效果
在这里插入图片描述
实现方式
. wxml

<view clsas ="modalBox">
<button bindtap='createDialog'>动态创建弹框</button>
</view>

. js

Page({
 /**
   * 页面的初始数据
   */
  data: {
  	
  },

 createDialog() {
    wx.showModal({
      title: '入职快一周',
      content: '越努力，越幸运！',
      success:function(res) {
        if (res.confirm) {
          console.log("确定");
        } else {
          console.log("取消");
        }
      }
    })
  }
})

列表形弹框

实现效果
在这里插入图片描述
扩展API

实现代码

扫描二维码关注公众号，回复： 5987681 查看本文章

.js

  //listDialog ： wxml 中view绑定的id或bindtap
  listDialog: function() {
    wx.showActionSheet({
      itemList: ['梦想', '理想', '起点', "终点"],
      success:function(res){
        console.log("成功回调"+res.tapIndex);
        if(res.tapIndex<2){
          console.log("成功回调" + "梦想+理想");
        }else{
          console.log("成功回调" + "起点+终点");
        }
      },
      fail(res){
        console.log("失败回调" + res.tapIndex);
      }
    })
  },

执行结果图

在这里插入图片描述

轮播图

实现效果
在这里插入图片描述

扩展API
在这里插入图片描述
实现代码

.wxml

<swiper indicator-dots="{{indicatorDots}}"  
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
      <block wx:for="{{imgUrls}}">  
        <swiper-item>  
           <navigator url="{{item.link}}" hover-class="navigator-hover">  
            <image src="{{item.url}}" class="slide-image"/>  
           </navigator>   
        </swiper-item>  
      </block>  
</swiper>

.wxss

//设置图片的宽度
.slide-image{
  width: 100%;
}

.js

 /**
   * 页面的初始数据
   */
  data: {
    //pages/mine/Thrned:跳转的页面  url:图片地址
    imgUrls: [{
      link: '/pages/mine/Thrned',
      url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554107622158&di=5df449974b38a4cd4bca5d301a01abe9&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20150430%2Ftooopen_sy_121079772852.jpg'
    }, {
      link: '/pages/logs/logs',
      url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554107622162&di=bb1b57d5af5bbee6659f728d13fe4fff&imgtype=0&src=http%3A%2F%2Fpic183.nipic.com%2Ffile%2F20181004%2F24839019_081923506085_2.jpg'
    }, {
        link: '/pages/mine/jump',
      url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554107622168&di=7bf95958982f51a28701ce5017f8a4ca&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fc8ea15ce36d3d539cb1de8f93187e950352ab0ec.jpg'
    }],
    // 是否需要底部轮播小点 
    indicatorDots: true,
    // 是否自动播放
    autoplay: true,
    // 自动播放时间间隔
    interval: 2000,
    // 滑动动画时间
    duration: 1000,
  },

原生toast与加载loading

实现效果

原生toast
原生加载loading

扩展API
在这里插入图片描述
实现代码

  //原生toast showToast ： wxml 中view绑定的id或bindtap
  showToast() {
    wx.showToast({
      title: '我爱洗澡好多泡泡 ~',
      icon: 'none',
      duration: 2000,
      mask: true
    })
  },
  //原生加载  showLoading： wxml 中view绑定的id或bindtap
  showLoading() {
    wx.showToast({
      title: '加载中 ~',
      icon: 'loading',
      duration: 2000,
      mask: true
    })
  },

扩展 api （中止加载框，可在逻辑内书写）：wx.hideLoading()

  //stopLoading： wxml 中view绑定的id或bindtap
  stopLoading() {
    wx.hideLoading()
  },

扩展场景（不建议使用）

效果
.wXml

<toast hidden="{{toastHidden}}" duration="1000" bindchange="onToastChanged"  >    
        {{toastText}}    
</toast>

.js

  data: {
    toastHidden: false,
    toastText: 'wXml 初始化默认配置'
  },

不推荐理由：初始化toast信息显示后无法再隐藏，设置的1秒消失并无效（目前个人原因，没有找到解决方式）

显示圆形图片

效果
.wxss

//注意点 - border-radius：图片圆角化，半径化，可自行调试
.avatar{
    height: 80px;
    width: 80px;
    border-radius: 50px;
}

.wxml （class引用 avatar）

<image src='../../images/mine/ic_icon.png' class='avatar'></image>

借鉴文章