小程序踩坑

  1. wss图片获取:
    image.png

2.page.json设置:
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置
项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键

3.v-if 和 hidden 的区别:


image.png
  1. 页面加载图片自适应:
    <image src="" mode="{{item.mode}}" /> ---image 组件


    image.png
  2. 弹框 --可以设置添加删除class

6.微信小程序--添加删除class
通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,


image.png

7.微信小程序---数据双向绑定与数据操作

//登录按钮点击事件,调用参数要用:this.data.参数;
//设置参数值,要使用this.setData({})方法

实现效果点击弹出窗+输入框显示按钮+点击按钮输入框内容清空

<view>
         <button bindtap='orderModal' data-num="1">申请退款</button>
</view>
<view class="order-pop {{_num==1?'showpop':''}}">
      <view class="order-bg"></view>
      <view class="modal">
          <view class="modal-inner">
              <view class="modal-text">
                  申请退货
              </view>
              <view class="modal-info">
                请输入短信验证码完成退货申请验证码已发至*******0345手机
              </view>
              <view class="modal-input">
                  <input value="{{inputValue}}" placeholder="" bindinput="codeInput" />
                  <view class="btn-ico {{codeAll ?'showico':''}}" bindtap="hideClose"></view>
              </view>
          </view>
          <view class="modal-buttons">
              <view class="modal-button"  bindtap='orderModal' data-num="0">取消</view>
              <view class="modal-button {{codeAll ?'sure':''}}">确认</view>
          </view>
      </view>
    </view>

js部分:

Page({
  data: {
    codeAll: false,
    inputValue: '',
  },
  orderModal: function(e){
    this.setData({
      _num: e.target.dataset.num
    })
  },
  codeInput: function(e){
    this.setData({
      inputValue: e.detail.value
    });
    if (this.data.inputValue.length === 0) {
      this.setData({
        codeAll: false
      });
    } else {
      this.setData({
        codeAll: true
      });
    }
  },
  hideClose: function(e){
    this.setData({
      inputValue: '',
      codeAll: false
    })    
  }
})
image.png

image.png

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 123,045评论 18 134
  • 搭建环境 按照官方的简易教程搭建。微信小程序简易上手 网上查找开源项目 在github上面查找开源项目,以供上手。...
    等酒香醇V阅读 1,097评论 0 0
  • 从1月10多号到2月19日一直在做微信小程序,虽然很菜,但是还是来分享哈自己的心得 入门教程就不细说 直接贴个官方...
    _proto_麻瓜一袁阅读 508评论 0 0
  • 日常开发中遇到的一些坑,写的比较简略,有些bug可能微信后续的版本已经修复,会有过时的风险,仅供参考 不支持imp...
    余歌_非鱼阅读 1,655评论 0 6
  • 我们先来想一想为什么要学习投资理财? 为了钱生钱啊!其实就是为了让手里的钱更多。 让手里的钱更多的方法有两个,第一...
    陈姿依阅读 6,863评论 36 209
  • 最近教学的最大的感受:一定要Open-Minded。很多学生最大的问题就是Close-minded, 总觉得自己很...
    RogerBright阅读 152评论 0 3
  • 妖狐泪洒桃花源,秦帅命悬取火种 雨诺回到峡谷桃花源看到家已被毁,瞬间崩溃昏死过去,震该如何支撑她继续生活下去呢? ...
    浪菩提阅读 223评论 3 3
  • JavaScript 中的原型对象中的方法中的 this 指向当前调用的这个方法的具体事例。
    Autumn_a阅读 179评论 0 0