微信小程序开发常用知识点

作者: Ke_Wang | 来源:发表于2017-02-08 16:56 被阅读2449次

    收集了一些小程序开发中常用到的知识点,记录一下。(小程序开发文档版本不断在更新,可能有些以后用不了的,这些发现了再更新,也请各位道友指正)


    1.导航栏标题

    与iOS开发很相似,小程序的导航栏也可以全局设置一下,在公共文件app.json中设置了导航栏相关样式如下:

      "window": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "小程序组件",
        "navigationBarBackgroundColor": "#f8f8f8",
        "backgroundColor": "#f8f8f8",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": "true"
      },
    

    这个地方是全局设置,如果想要在不同的页面设置各自的标题属性,只需要在该子级文件中设置

    {
    "navigationBarTitleText": "页面1"
    }
    

    2.子页面调用公共js对象以便调用其方法

    子页面想调用共公js的方法,需先在子页面js中先实例化app:具体过程如下

    //app.js 中写子页面需要调用的公共方法
      App({
      // 自定义公共方法
      commonFunction:function(){
          return "公共方法"
        }
       })
    

    在需要调用的子页面中,

    var app = getApp();//先实例化应用
    // console.log(app)//可查看公共app.js里面的方法
    Page({
      data: {
      "label":app.commonFunction()//子页面中调用公共appjs的方法
      }
    })
    

    3.嵌套循环时候,最好重命名下list和index

    如果是嵌套循环,很容易出现多个list和index,例如表视图一样,所以在小程序中可以重命名 list 和index 方法为:wx:for-index='重命名' wx:for-list="重命名"

    <view>
    重命名list和index:
    <text class='{{classname}}' wx:for="{{array}}" wx:for-index="key" wx:for-item="value"> {{key}}--{{value}}    </text>
    </view>
    

    4.善用公共模板

    在APP开发中,UI复用是一个很好的手段,在小程序上就是模板template。
    在逛小程序联盟的时候发现了一个大湿总结的比我好,搬过来一下。


    微信小程序中,如果几个页面中需要引用同一个header/footer,当定义了公共模板时,有两种引用方法如下:
    方法一:在公共模板中定义template元素,利用 方法 ,这种方式只会显示公共模板的template里面的内容,之外的内容不会显示

    //在wxml中
    <import src='公共模板地址'/>
    <template is='模板里面template定义的name名称' data='{{引入的数据1,引入数据2}}'></template>
    
    注意:这里的data='{{引入的数据1,引入数据2}}' 是在template中要提取js文件中的data数据里面的key名字,否则无法显示。
    公共模板的wxml:在公共模板中必须定义每一个template的的name的名字,否则引用的时候无法得知引用具体某一个;
    
    <template name='header'><!--必须有有name不然import方式无法判断到底要引用哪一个tempalte-->
    {{title.header}}<!--这个数据只是提取要引用的文件的里面js里面定义的对应的数据,如果在其他文件中定义不在要引用的文件中无效-->
    </template>
    
    要引用的文件js定义数据:
    
    data: {
    title:{header:'这是template的header部分',footer:'这是template的footer部分',other:'这是tempalt外部部分'}
    }
    

    ** 方法二:**

    <include src="公共模板地址"/>这种方式是引入了模板中除了tempalte以外的所有内容。
    <include src="../../template/footer.wxml"/> 
    公共模板的wxml:
    
    {{title.other}}
    js定义的数据:
    
     title:{header:'news里面的的header',footer:'这是template的footer部分'}
    

    总结:import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容,显而易见,include方式更简单一些,在wxml中只需要一句话即可。

    5.小程序的尺寸单位rpx

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px。
    具体的这里有一片文章介绍的很详细还有这个

    6.小程序中用html、css

    • 小程序中的选择器跟css的一样.

      1:.class
      2: #id
      3: element
      4:分组 element,element
      5:伪类选择器 :after :before 注意这里加入在了元素之内的最后/最前
      
    • 引入外部css文件的时候,只需像iOS中导入文件那样,在其css文件的开始写上 : @import "外部地址" 即可。

    • html中布局用div很多,但是在小程序中用view标签,文本用text。

    • 如果想用html原有的元素,必须在wxss中定义元素的display:block不然无法应用,且html元素的id选择器是无法应用的。

    7.事件总结/冒泡事件

    小程序的事件主要有:

     touchtab 点击事件
     touchstart 开始滑动
     touchmove 滑动中
     touchend 滑动结束
     touchcancel 滑动中断
    

    小程序中的wxml中绑定事件有两种:以touchtab为例 ,在wxml中必须有bind/catch不然无法实现上述事件
    bindtouchtab和catchtouchtab bind的不会阻止事件冒泡(元素最里层到最外层函数执行),catch会阻止冒泡,只是冒泡到当前层结束

    如果想在元素执行某事件时把元素的某个属性传到后台 可在元素中加入data-属性名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置,查看滑动位置也可以通过touchstart和和touchend的clientx/y获取


    看到几个别人写的,瞬间石化,果断收藏。

    8.点击更换图片

    data: {
        "banner":"../../../images/banner.jpg",
        "daimaisrc":"../../../images/cart2_xz02.png",
        "bianjie":"../../../images/cart2_xz04.png",
        "shihui":"../../../images/cart2_xz05.png",
        cityName:"",
        getChannelByCityId:"",
        carName:"",
        carId:""
      },
      // 点击选择代买平台
      daimaiClick: function(e){
        console.log("-------d:"+this.data.daimaisrc);
        if(this.data.daimaisrc=="../../../images/cart2_xz02.png"){
          this.setData({
            daimaisrc: "../../../images/cart2_xz01.png"
          })
        }else{
          this.setData({
            daimaisrc: "../../../images/cart2_xz02.png"
          })
        }
      },
    

    9.锚点定位

    
    <!--index.wxml-->
    <view class="container">
    <!--品牌-->
    <scroll-view scroll-y="true" scroll-into-view="{{toView}}"> 
      <view wx:for="{{citysMap}}">
        <view class="ncq-smal" id="{{index}}">
          {{index}}
        </view>
        <view wx:for="{{item}}" wx:for-item="citys" class="ncq-box" 
             data-cityname="{{citys.city_name}}" bindtap="cityNameClick">
                <label class="ncq-brand-name">{{citys.city_name}}</label>
        </view>
      </view>
    </scroll-view>
     <!--  字母导航-->
        <view class="ncq-fixe-nav">
                <view  wx:for="{{citysMap}}" data-letter="{{index}}" bindtap="rightZmClick">
                    <label>{{index}}</label> 
                </view>
        </view>
       <!-- 字母导航end-->
    </view>
     //字母锚链定位
      topZmClick: function (event) {
        var letter = event.currentTarget.dataset.letter;
        this.setData({
          toView: letter
        })
      },
    scroll-view {
      height: 600px;
    }
    注:scroll-view必须要设置高度,不然无效
    

    10.调用工具js文件/utils文件中的函数/变量

    在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要两步骤:
    1:在utils被调用的js文件中,面向对象的方式模型输出: module.exports={要调用的函数名称:要调用的函数名称 };
    2:在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址"); 可以输出一下object就能看到被调用的方法了;
    例子如下:

    utils中被调用的js:
    
    var URl='http://123.23.169';
     var getImageurl=function(imageurl){
    return URl+imageurl;
     }
    //  要引用这个文件的函数或者变量,除了在要引用的的js文件中模块化之外(var utils=require('js地址')),
    // 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下:
     module.exports={
         URl:URl,//要引用的函数 xx:xx
         getImageurl:getImageurl
     }
    

    要调用的js文件:

    // 获得工具utils工具js里面函数,先模块化引用utils里面的js地址  reqiure('js地址')成一个面向对象
    var utils=require('../../utils/app.js')
    // console.log(utils) 可查看获得的函数
    console.log(utils.getImageurl('iamgeaaddress.png'))
    

    11.后台交互/wx.request({})方法/渲染页面方法 解析

    小程序的后台获取数据方式get/post具体函数格式如下:wx.request({})

    data: {
        logs:[]
      },
    onLoad:function(){
    this.getdata();
    }
    getdata:function(){//定义函数名称
    var that=this;   // 这个地方非常重要,重置data{}里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了
        wx.request({
          url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//请求地址
          data:{//发送给后台的数据
            name:"bella",
            age:20
          },
          header:{//请求头
            "Content-Type":"applciation/json"
          },
          method:"GET",//get为默认方法/POST
          success:function(res){
            console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据
          that.setData({//如果在sucess直接写this就变成了wx.request()的this了.必须为getdata函数的this,不然无法重置调用函数
          logs:res.data.result
              })
          },
          fail:function(err){},//请求失败
          complete:function(){}//请求完成后执行的函数
        })
      },
    
    wxml页面:
    
    <view  wx:for="{{logs}}" wx:for-item="value">
      {{value.catname}}
    </view>
    

    12.scroll-view用法

    如果屏幕中某元素的内容超过此元素的高度,可设置元素为scroll-view 为滚动状态元素,这样可以做到元素固定高度且元素内容滚动屏幕不滚动的效果;

    scroll-view标签的主要属性分为以下几种:

    scroll-x/y='true/false'----允许横向/纵向滚动 
    scroll-top/left='50'--设置滚动条出现的位置 
    bindscroll='' 滚动中触发的函数 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 
    bindscrolltoupper='scrolltoupper' 滚动到顶部/左边出发的函数scrolltoupper 
    bindscrolltolower='scrolltolower' 滚动到底部/右边出发的函数scrolltolower 
    upper-threshold='50' 距离顶部/左边多远时触发scrolltoupper函数 
    lower-threshold='50' 距离底部/右边多远时触发scrolltolower 函数 
    scroll-into-view=‘id名字.这个是用来设置此元素的某个子元素出现在最上方,id的名字为此子元素的id
    

    13.广告轮播

    微信小程序广告轮播元素 图片所在元素/swiper-item>
    其中属性有:

       autoplay:true,//是否自动播放
       autoplaytxt:"停止自动播放",
       indicatorDots: true,//指示点
       // indicator-color:"white",//指示点颜色 暂未启动
       // indicator-active-color:"red",//当前选中的指示点颜色暂未启动
       indicatorDotstxt:"隐藏指示灯",
       interval: 1000,//图片切换间隔时间
       duration: 500,//每个图片滑动速度,
       circular:true,//是否采用衔接滑动
       current:3,//初始化时第一个显示的图片 下标值(从0)index
    

    图片更改事件:bindchange='imgchange' imagechange()的e.detail.current为当前显示页面的下标值

    wxml:
    
    <swiper bindchange="imgchange" indicatorDots='{{indicatorDots}}' current='{{current}}' autoplay='{{autoplay}}' interval='{{interval}}'duration='{{duration}}' circular='{{circular}}'>
        <block wx:for='{{imgUrls}}'>
        <swiper-item>
            <image style="" mode="" src="{{item}}" binderror="" bindload="" class='swiper-img'></image>
        </swiper-item>
        </block>
    </swiper>
    <button  bindtap="autoplaychange" >{{autoplaytxt}}</button>
    
    wxjs:
    
    Page({
      data: {
        imgUrls: [
          '../../img/3.jpg',//图片src
          '../../img/6.jpg',
          '../../img/5.jpg',
          '../../img/4.jpg'
        ],
        autoplay:true,//是否自动播放
        autoplaytxt:"停止自动播放",
        indicatorDots: true,//指示点
        // indicator-color:"white",//指示点颜色 暂未启动
        // indicator-active-color:"red",//当前选中的指示点颜色暂未启动
        indicatorDotstxt:"隐藏指示灯",
        interval: 1000,//图片切换间隔时间
        duration: 500,//每个图片滑动速度,
        circular:true,//是否采用衔接滑动
        current:3,//初始化时第一个显示的图片 下标值(从0)index
      },
      autoplaychange:function(event){//停止、播放按钮
        if (this.data.autoplaytxt=="停止自动播放") {
          this.setData({
            autoplaytxt:"开始自动播放",
            autoplay:!this.data.autoplay
          })
        }else{
           this.setData({
            autoplaytxt:"停止自动播放",
            autoplay:!this.data.autoplay
          })
        };
      },
      imgchange:function(e){//监听图片改变函数
    console.log(e.detail.current)//获取当前显示图片的下标值
      }
    })
    
    wxss:  
    
    .swiper-img{
        width: 100%;
        height: 500rpx;
    }
    

    14.提示框

    <!-- 提示view -->
      <loading hidden="{{loadingHidden}}">提交中...</loading>
      <modal bindconfirm="onTipsConfirm" hidden="{{hiddenTips}}" no-cancel>{{tipsContent}}</modal>
      <toast hidden="{{hideCommitSuccessToast}}">提交成功</toast>
    // 提示框参数
        hiddenTips: true,
        tipsContent: '',
        loadingHidden: true,
        hiddenCommitTips: true,
        hideCommitSuccessToast: true,
      // 提示框
      onTipsConfirm: function (e) {
        this.setData({
          hiddenTips: true,
          tipsContent: ''
        })
      },
    if (!name) {
            this.setData({
              hiddenTips: false,
              tipsContent: '请填写您的姓名'
            })
            return;
          }
    第二种方式:
    // 提交成功
                  this.setData({
                    loadingHidden: true,
                    hideCommitSuccessToast: false
                  })
                  // 定时,3秒消化
                  setTimeout(() => {
                    this.setData({
                      hideCommitSuccessToast: true
                    })
                  }, 3000)
    

    15.数据缓存

    onLoad: function () {
        var that = this
        var brands = wx.getStorageSync('brands');// 从微信缓存中获取数据
        if(brands){
          //  console.log("从微信缓存中获取品牌数据");
           that.setData({
                brandsMap: brands
           })
        }else{
          //  console.log("从接口获取品牌数据");
           //获取接口品牌数据
            wx.request({
              url: userCarUtil.host + userCarUtil.getBrand_second,
              success: function (res) {
                wx.setStorageSync('brands',res.data);// 将数据放入微信缓存
                that.setData({
                  brandsMap: res.data
                })
              }
            })
        }
      }
    

    相关文章

      网友评论

      • 知晓程序:你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布,我们会注明来源和作者姓名。

        非常感谢~~~

      本文标题:微信小程序开发常用知识点

      本文链接:https://www.haomeiwen.com/subject/wbovittx.html