微信小程序开发技巧

小程序为了简化视图，注重逻辑，提供了一些封装好的组件：

    1.如view标签：相当于div，定义区域

    2.<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

            使用在v-for循环

    3.swiper标签：轮播

    4.image标签：图片

    5.icon标签：下划线等

    6.text标签：定义文本  ==》内容很多使用：<view class='content'>
                                             {{intro}}
                                          </view>

    7.button标签：按钮

    8.scroll-view标签：可滚动视图区域，x,y轴等


    9.因为 wx:if 是一个控制属性，需要将它添加到一个标签上可以使用一个 <block/>

            <block wx:if="{{true}}">
              <view> view1 </view>
              <view> view2 </view>
            </block>

    10.wx-for

            使用 wx:for-item 可以指定数组当前元素的变量名，

            使用 wx:for-index 可以指定数组当前下标的变量名：

            <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
              {{idx}}: {{itemName.message}}
            </view>



最好使用： wx:key='key'

              <block wx:for="{{imgUrls}}" wx:key='key'>
                <swiper-item >
                  <image src="{{item.pictureUrl}}" class="slide-image"/>
                </swiper-item>
              </block>

二.属性
设置data属性：

        function setData(){
            var that = this;
            that.setData({
              message: '新消息'
            })
        }

1.image标签

    （1）mode属性：设置裁剪模式

2.input标签

    bindinput='inputSearch'输入框事件，拿到value

     /** 获取搜索内容*/
      inputSearch(e){
        this.setData({
          searchText:utils.trim(e.detail.value),
        })
    }

    value='{{searchText}}'

3.事件冒泡，阻止遮罩层滑动内容：catchtouchmove=”preventD”；
三.获取属性
wxml中用data-id传出的数据在js中的获取方法：

        wxml: 
                view bindtap=”touch” data-id=”{{id}}” 
                //{{id}}这里的id为js里面设置的数据； 

        js: 
                touch:function(e){ 
                    var id = e.target.dataset.id; 
                    console.log(id); 
                }

                这样就可获取到前台页面通过点击事件传过来的值了。



也可以 <view bindtap='touchNewsdetail' id='{{index}}' class='text-box' wx:for-index='index'>

事件里面获取：
            e.currentTarget.id

---

2.设置title:在组件的js

         /**
           * 生命周期函数--监听页面加载
           */
          onLoad: function (options) {
            wx.setNavigationBarTitle({
              title: '最新资讯',
            })

3.页面跳转：

        wx.navigateTo({
          url: '/pages/news/newsDetail/index?id=' + e.currentTarget.id,
        })

页面数据存储：

        1.使用异步

                 wx.setStorage({
                    key: key,
                    data: data,
                  })

        2.获取

                wx.getStorage({
                    key: 'userData',
                    success: function (res) { -- 返回的值就是存储的值
                      wx.navigateTo({
                        url: '/pages/mine/register/mine?' + `userdata=${JSON.stringify(res.data.obj)}&referCode=${_that.data.scene}`,
                      })
                    },
                  }) 

四.常用语法
1. =0}}’>+{{item.capital}}

2.div盒子周围的阴影：box-shadow:0rpx 10rpx 10rpx #eee;

3.图片上的遮罩层：background:rgba(255,255,255,.3);

4.背景颜色，遮罩层：
.bg {
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
top:0;
left:0;
z-index:900;
}
5.提示：

     wx.showToast({
        title: text,
        icon: 'none'
      })

6.获取输入框内容

            <input type='phone' maxlength='11' bindblur='inputData' bindinput='inputData' data-type='0' value='{{phoneNum}}'></input>

五.生命周期
const mta = require(‘../../../utils/mta_analysis.js’)
Page({

/**
* 页面的初始数据
*/
data: {
linkUrl:”
},

/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: options.title,
})

//腾讯统计
mta.Page.init()

this.setData({
  linkUrl: options.linkUrl
})

},

/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数–监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})