[学习] 入门微信小程序开发

页面管理-框架管理了整个小程序的页面路由，做到页面无缝切换，并赋予页面完整的生命周期，开发者只需将页面数据,方法，生命周期函数注册进框架中
代码结构

tabBar的配置
事件绑定
wxml----bindtap、catchtap="方法名" data-要传递的参数名取值: js---- e.currentTarget.dataset.参数名
插入知识点 ::after和:after
设置在对象前 ( 依据对象树的逻辑结构 ) 发生的内容。用来和content属性一起使用，并且必须定义content属性。
:after和::after 前者css2写法，后者css3写法。
数据交互

 onLoad: function () {
    this.getProList();
 },
 //后台请求获取数据
 getProList: function () {
    var self = this;
    wx.request({
      url: 'http://www.xzylogic.xyz/wx_Json_Img/bdy.json',
      method :'GET',//必须大写
      success : function(res){       
        self.setData({
            proList : res.data
        });        
      }
    })
  }

工具基础库兼容性

微信版本过低需要兼容。主要兼容---组件,API（接口,参数）官方文档如下：

兼容处理官方文档

基础库版本与客户端版本对应关系

//常用兼容性处理方法

 if (wx.canIUse && wx.canIUse('setClipboardData')){//1.1.1   way1
        wx.setClipboardData({
          data: '复制我啊！',
          success : function(res){
            wx.showModal({
              title: '成功!',
              content: '复制好了，请处置！',
            })
          }
        })
    }else{
        wx.showModal({
          title: '提示',
          content: '您的微信版本过低！',
        })
    }

if (wx.setClipboardData) {                            //way2
      wx.setClipboardData({ 
        data: '复制我呀！',
        success: function (res) {
          wx.showModal({
            title: '复制成功！',
            content: '内容已经复制好了，请处置！',
          })
        }
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '您的微信版本过低！'
      })
    }

页面数据间的传值

//way1 页面间url传值

wx.navigateTo({
   url : '/pages/detail/detail?title='+title   //传
})

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {                  //取
    var title = options.title;
}

//way2 本地存储
wx.setStorageSync("test", "测试数据");  //way3 本地存储
wx.getStorageSync("test"); 

//way3 app.js中定义全局变量

globalData: {
    userInfo: null,
    host: 'http://www.xzylogic.xyz/wx_Json_Img/bdy.json' //定义
}

const app = new getApp();//读取
app.globalData.host = "";

swiper圆点样式重写

.swiperBar .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  top: 310rpx;
  z-index: 999;
}

.swiperBar .wx-swiper-dot {
  width: 20rpx;
  display: inline-flex;
  height: 20rpx;
  margin-left: 12rpx;
  justify-content: space-between;
}

.swiperBar .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #999;
  border-radius: 20rpx;
  -webkit-border-radius: 20rpx;
  -moz-border-radius: 20rxp;
}

.swiperBar .wx-swiper-dot-active::before {
  background: #ff8a00;
}

.swiperBar .wx-swiper-dot.wx-swiper-dot-active {
  width: 40rpx;
}

<!-- 轮播图 -->
<view class='swiperBar'>
    <swiper duration="1000" circular="{{true}}" indicator-dots="{{true}}" indicator-color="" interval="2000" current="0" indicator-color="#999" indicator-active-color="#ff8a00" autoplay="{{true}}">
      <block wx:for='{{bannerImg}}'>
        <swiper-item>
          <image src="{{item.pic}}" mode='scaleToFill' />
        </swiper-item>
      </block>
    </swiper>
</view>

薛定谔的喵喵喵

发布了35 篇原创文章 · 获赞 11 · 访问量 3万+

私信关注

[学习] 入门微信小程序开发

猜你喜欢