• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发常用方法

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

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

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

2、if判断

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

3、for循环

<block wx:for="{{listRepar}}" wx:key="unique" wx:for-index="i" wx:for-item="item">
  <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>

bind 换为 catch 则不会向上穿透


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之巧妙的封装发布时间:2022-07-18
下一篇:
「小程序JAVA实战」小程序的页面重定向(60)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap