微信小程序开发常用方法

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1、函数中访问data中的数据

_this.setData({
     // 日历数据
     signList: dataList,
     // 当前日期
     todayDay: str
})

2、if判断

wx:if="{{item.id && item.lessNum != 0}}"

3、for循环

　　<view class='tabBox active'

　　　　bindtap="chooseItem"

　　　　<view class='nameWei'><image class='nameWeiPic' src="../../images/pp.png" />{{item.repair_type}}</view>

　　　　<view class='nameWord'>{{item.repair_type}}</view>

　　</view>

</block>

4、小程序实现登录界面

html页面

<form bindsubmit="formSubmit">
    <text class="login_title">登录</text>
    <input class="ipt_login" name="userName" value="{{userName}}"/>
    <input class="ipt_login" name="userPassword" type="password" value="{{userPassword}}"/>
    <button class="btn_login" form-type="submit">登录</button>
  </form>

js页面

//logs.js=
Page({
  data: {
    logs: [],
    userName: '请输入登录名',
    userPassword: ''
  },
  // 登录
  formSubmit: function (e) {
    console.log(e.detail.value);
    //获得表单数据
    var objData = e.detail.value;

    if (objData.userName && objData.userPassword) {
      // 同步方式存储表单数据
      wx.setStorage({
        key: 'userName',
        data: objData.userName
      });
      wx.setStorage({
        key: 'userPassword',
        data: objData.userPassword
      });

      //跳转到成功页面
      wx.navigateTo({
        url: '../lineOrder/index'
      })
    }
  },
  //加载完后，处理事件 
  // 如果有本地数据，则直接显示
  onLoad: function (options) {
    var that = this;
    //获取本地数据
    wx.getStorage({
      key: 'userName',
      success: function (res) {
        console.log(res.data);
        that.setData({ userName: res.data });
      }
    });
    wx.getStorage({
      key: 'userPassword',
      success: function (res) {
        console.log(res.data);
        that.setData({ userPassword: res.data });
      }
    });
  }
})

获取本地存储

var session_id = wx.getStorageSync('PHPSESSID');// 获取一步存储

小程序的本地存储是无时间限制的，就是说永远

5、自定义属性

<view class='showList '  bindtop='shopPost'   data-shopId='item.goods_id' ></view>  

页面中自定义属性必须通过:data- 的形式书写

js取值

shopPost:function(event){   var postId = event.currentTarget.dataset.shopid }

最后的 shopid 就是 html 中的 data后边的，并且在这里不区分大小写,必须用小写

小程序模仿jq的 toggleClass，多个选项，点击哪个哪个高亮显示，再次点击去掉高亮显示。

<block wx:for="{{listRepar}}" wx:key="unique" wx:for-index="i" wx:for-item="item">
            <view class="tabBox {{item.checked != true ? ' ' : 'active'}}" bindtap="chooseItem" data-repId="{{item.repair_type_id}}">
                <view class='nameWei'><image class='nameWeiPic' src="{{item.repair_photo}}"></image>{{item.repair_type}}</view>
                <view class='nameWord'>{{item.repair_info}}</view>
            </view>
        </block>

js。高亮是用 class active 控制，点击的时候获取自定义属性 id,用这个 id 和原有的数据list对比找到那个id的数据，改变他的 checked 的属性。小程序没有 addclass这些方法，所以判断高亮的时候，给每一个数据item 都加一个 checked的属性，true 就代表高亮。

改变数据的 item 之后一定要在赋值回去，吧原先的数据改变掉。

chooseItem: function (e) {
        var dId = e.currentTarget.dataset.repid,
            listReparDta = this.data.listRepar,
            _this = this;
        for (var i = 0; i < listReparDta.length; i++){
            if (listReparDta[i].repair_type_id == dId){
                listReparDta[i].checked = !listReparDta[i].checked;
            }
            _this.setData({
                listRepar: listReparDta
            });
        }
    },

6、页面的跳转

7、动态控制 class

  <li class="{{item.date != '' ? ' ' : 'empty'}}"  data-dateId='{{item.date}}' bindtap="chooseDay">

8、使用小程序拨打电话

<button type="default" bindtap="calling">拨打电话</button>

Page({
  calling:function(){
    wx.makePhoneCall({
      phoneNumber: '12345678900', //此号码并非真实电话号码，仅用于测试
      success:function(){
        console.log("拨打电话成功！")
      },
      fail:function(){
        console.log("拨打电话失败！")
      }
    })
  }
})

9、小程序图片给定宽度，让高度自使用

样式设置宽度例如：100%，

.img{
 
　　width: 100%;
 
}

添加属性 mode="widthFix"，

<image class="img" src="../../images/hello.png" mode="widthFix">

10、小程序底部按钮点击切换配置

底部的按钮点击切换在小程序里面是通过配置得来的。

在 app.json 文件中配置相关选项

{
  "pages":[
    "pages/index/index",
    "pages/priceType/index",
    "pages/logs/logs",
    "pages/lineOrder/index",
    "pages/chooseTap/index",
    "pages/main/index"
  ],
   "window":{

navigationBarBackgroundColor 导航栏背景颜色，如”#000000”

navigationBarTextStyle 导航栏标题颜色，仅支持 black/white

navigationBarTitleText 导航栏标题文字内容

backgroundColor 窗口的背景色

backgroundTextStyle 下拉背景字体、loading 图的样式，仅支持 dark/light

enablePullDownRefresh 是否开启下拉刷新，详见页面相关事件处理函数


  },
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#f9f027",
    "borderStyle": "white",
    "backgroundColor": "#292929",
    "list": [
      {
        "pagePath": "pages/index/index",
        // "iconPath": "images/footer-icon-01.png",
        // "selectedIconPath": "images/footer-icon-01-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/main/index",
        // "iconPath": "images/footer-icon-02.png",
        // "selectedIconPath": "images/footer-icon-02-active.png",
        "text": "我的"
      }
    ]
  },
  "debug": true
}

10、小程序点击穿透事件

<!-- 综合筛选 -->
    <view class='choose_dailog' wx:if='{{isShowDailog}}' bindtap='showDailog' catchtouchmove="stopMove">
        <view class='dailog_wrap'>
            <view>
                <view class="dailogC_titile">性别</view>
                <view class="overflowStyle">
                    <view 
                        class="{{item.checked == true ? 'active': ' '}} choose_itemDailog" 
                        wx:for="{{sexDate}}" wx:key="index"
                        catchtap="chooseSex" data-repId="{{item.id}}"
                        >
                        {{item.text}}
                    </view>
                </view>
            </view>
            <view class="dailog_footer">
                <view class="dailog_footer_item one">重置</view>
                <view class="dailog_footer_item two">完成</view>
            </view>
        </view>
    </view>