精华内容
下载资源
问答
  • view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> <block wx:if="{{true}}"> <view> view1 <...
  • wx:if 与wx:else

    万次阅读 2019-04-10 18:03:30
    看官方文档wx:if 与wx:else 是放在 条件渲染里面来讲的的, 由此可以看出他们的作用就是渲染之类的作用 官方文档地址 看先一些说明吧: 一个简单的例子: 有个图片默认的时候不显示,点击按钮的时候才让图片...

    看官方文档wx:if 与wx:else 是放在 条件渲染里面来讲的的,

    由此可以看出他们的作用就是渲染之类的作用

    官方文档地址

    看先一些说明吧:

     

    一个简单的例子:

    有个图片默认的时候不显示,点击按钮的时候才让图片显示

    这个时候使用wx:if 挺好的,条件渲染嘛

     

    给出代码:

    <view>

    <image src='http://pl3g5zt02.bkt.clouddn.com/icon4.jpg' class='img' wx:if="{{isShow}}"></image>

    <button bindtap='btn'>点击出现图片</button>

    </view>

    js中

    btn:function(){

    this.setData({

    isShow: true

    })

    },

    这样点击的图片就显示出来了,

    wx:else 原理一样.

     

     

     

     

     

     

    展开全文
  • Page({ data: { testnum:""//设置测试参数 }, test:function(){ var Num = this.data.... wx.setStorage({//存储到本地 key:"testNum", data:Num }) } }) Page({ data: { test...
    Page({
      data: {
        testnum:""//设置测试参数
      },
      test:function(){
        var Num = this.data.testnum;
        wx.setStorage({//存储到本地
          key:"testNum",
          data:Num
        })
      }
    })
    
    Page({
      data: {
        testnum:""//设置测试参数
      },
    onLoad:function(option){
        var that = this,
        wx.getStorage({//获取本地缓存
          key:"testNum",
          success:function(res){
            that.setData({
              testnum:res.data
            )};
          },
        })
      }
    })
    
    Page({
      data: {
        testnum:""//设置测试参数
      },
      onLoad:function(option){
        var num = wx.getStorageSync('testNum');//wx.getStorageSync(key),获取本地缓存
        this.setData({
          testnum: num
        });
      }
    })
    
    展开全文
  • 微信小程序 - 高级 - wx:for 与 wx:for-items 与 wx:key - 1

    万次阅读 多人点赞 2018-07-29 21:49:49
    微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢? 1 wx:for 从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序。 示例里面都是对数组进行...

    前言:

    微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢?


    1 wx:for

    从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序。

    示例里面都是对数组进行条件判断,比如iconsizejius就是一个典型的数组。

     


    2 wx:for-items 与wx:for-item

    2.1 wx:for-items

    现在看wx:for-items, 和wx:for比,wx:for-items有什么不同呢?

    【案】笔者认为wx:for-items应该可以包容wx:for,而不是像有些朋友说,wx:for用于数组的单循环,而wx:for-items用于可嵌套的多级循环。

     很显然,wx:for-items,在上面的例子里面用于数组,也同时用于外层的单循环。

    【案】

    <view class="section section_gap" wx:for-items="{{array}}" wx:for-item="item">

    分析一下,

    wx:for-items首先指向了数组array,

    之后,wx:for-items 选取了item,做进一步的循环STEPS,

    我们看到array的一个item包含两个属性,


    2.2 wx:for-item

    wx:for-item注意wx:for-items比少了S,wx:for-item主要只是对循环项目数组的元素(item in array)重新命名,这里

    这里array的元素被item取代来表示。

     还是刚才的例子,现在看右边,item被用于对循环内体的设置,

    然后实现对数组内多个元素的渲染

     


    3  wx:key

     wx:key是对微信循环功能的一次提升,在软件编译的时候,微信会提示你是用 wx:key来稳定视图层的项目显示。

    摘取 一段定义的描述,

    wx:key 的值以3种形式提供

    • 字符串

    代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。 

    • 保留关键字 *this

    代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如: 
    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

    一般是指定一个唯一的字段(类似于id的定义);

    • 通配符+名字 

    例如 *item


     4 嵌套的应用

    上面的例子都比较简单,只有一层或者一个属性的嵌套,现在看一个复杂一点的,例子,来源于官方的组件展示程序。

    这是一个多级菜单的展示,用户点击后,会展开三个选项,而每一个选项对应一个页面,

    <view class="index-bd">
        <view class="kind-list">
          <block wx:for-items="{{list}}" wx:key="{{item.id}}">
            <view class="kind-list-item">
              <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
                <view class="kind-list-text">{{item.name}}</view>
                <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
              </view>
              <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
                <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
                  <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                    <navigator url="pages/{{page}}/{{page}}" class="navigator">
                      <view class="navigator-text">{{page}}</view>
                      <view class="navigator-arrow"></view>
                    </navigator>
                  </block>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>

    从这段代码里面,我们看到,

     针对上面这个比较复杂的数据结构,在block tag里面(有两层block)

    先对list,用wx:for-items,

    <block wx:for-items="{{list}}" wx:key="{{item.id}}">

    做最外层循环,这里list里面的数组元素,就变为item了,item有4个属性,其中一个是pages,

    【注意】这里wx:for-items和wx:for的不同就是,wx:for-items默认的循环项为item,不需要指定了。所以,第二层循环的item,解释器已经理解了,现在item下面的pages,依旧是一个数组,我们可以在嵌套来遍历他。

    <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">

    然后,用wx:for-items,对list里面的pages属性内嵌数组做了遍历循环,注意,后面又立即跟了wx:for-item="page",注意,这里没有s,就是对item的元素pages数组的元素重新命名为page了,后面的page操作,就是对这个内嵌数组操作。这里wx:for-item的命名其实是一个可选项,如果不命名,默认就是item,也就是嵌套的循环下标也是item,大概是为了避免误解,导致,微信团队,又加了这一个功能,个人觉得有点多余。


    参考:

    1 image

    https://developers.weixin.qq.com/miniprogram/dev/component/image.html?search-key=wx%3Afor

    2 小程序wx:for、wx:for-items和wx:for-item的正确用法

    https://blog.csdn.net/jimolangyaleng/article/details/54315974

    3 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用

    https://blog.csdn.net/u013338742/article/details/78785918

     

    展开全文
  • 1.(wx.navigateTo)在小程序页面跳转中,页面之间跳转会有携带参数的需要(例如:从列表页跳转到详情,详情需要通过不同的id来请求不同的详情页数据): (1)跳转有两种: ①标签方式:&lt;navigator url=&...

    1.(wx.navigateTo)在小程序页面跳转中,页面之间跳转会有携带参数的需要(例如:从列表页跳转到详情,详情需要通过不同的id来请求不同的详情页数据):

    (1)跳转有两种:

            ①标签方式:<navigator url="/pages/shopdetail/shopdetail?id={{item.id}}&name='xiaoming'&age=20" open-type="navigate"></navigator>

            ②js事件的方式:           

               wx.navigateTo({

                 url: "/pages/shopdetail/shopdetail?id="+ifor.id+"&name='xiaoming'&age=20"

              });

    (2)路径地址中携带参数,第一个参数用问号(?)隔开,第二个参数之后用(&)隔开,参数的key和value之间用等号(=)隔开,其实和HTML的a链接一样;

    (3)从a页面跳转到b页面,携带的参数在b页面的onload生命周期时获取

              onLoad: function(options) {
                   var id = options.id;
                   var name = options.name;
                   var age = options.age;
             },

       2.从某些页面回到首页,也有存在从该页面带参数,携带的该参数能改版首页的某些状态,因为从首页过来是通过  navigateTo过来的,所以从该页面再会带首页,不能用  navigateTo(在小程序开始时只有五级页面嵌套,虽然现在好像没有这个限制了,但如果循环往复上百次上千次,那navigateTo结果就不敢想象了,就嵌套了几千次了);这时可以考虑销毁当前页面以前的所有页面,跳到首页

         3.如果不用     wx.reLaunch  而 想用   wx.navigateTo  其实也有方法

        (1)存储到app对象上的方式,在app.js中定义一个全局变量mydata

    var app = getApp()
    app.globalData.mydata = {name:'xiaoming', age:30};  //存储数据到app对象的全局变量上
    wx.navigateBack();  //返回上一个页面

      (2)存储到数据缓存的方式

    wx.setStorage({
      key: "mydata",
      data: {name:'xiaoming', age:30},
      success: function () {
        wx.navigateBack();   //返回上一个页面
      }
    })

    4.wx.navigateBack,其实你从那个页面跳走再用wx.navigateBack返回的方式走到该页面,走的时候是啥状态现在就是啥状态,如果涉及状态改变的部分必须写在onshow生命周期函数中,onload只会初次执行,等wx.navigateBack不会再次执行,但onshow会执行。

    5.wx.switchTab是不能携带参数的,可以通过全局变量或者缓存来实现参数携带;

    (1)全局变量:

    app.globalData.otherInfo.detailId = that.data.detailInfor.id;

    (2)本地缓存

    wx.setStorageSync('detailId', that.data.detailInfor.id)

    6.对于有特殊字符的地址参数,我们还需要进行转义

    (1)代码(encodeURIComponent:编译,decodeURIComponent:还原。成对使用

    // 原始url
    var url ='http://img-ads.csdn.net/2018/201812101159198567.png';
    // 转码后的
    var newUrl = encodeURIComponent(url);
    // 将转码的再次还原
    var oldUrl = decodeURIComponent(newUrl);
    console.log('url', url);
    console.log('newUrl', newUrl);
    console.log('oldUrl', oldUrl);

    (2)效果

    8.小程序跳转小程序携带参数:点击传送门去官网

    8.1有两种方式:

    (1)通过path 的方式:

    (2)通过extraData的方式:

    8.2 在使用时有一些区别:

    (1)path的方式可以通过query的方式可以拿到;通过extraData的方式需在 “options.referrerInfo.extraData.参数名” 的方式来获取,例如下图;

    (2)query的方式:在 envVersion 为 develop 模式时,第一次跳转小程序无法获取 参数,在第二次以及第二次以后才能获取参数值。但是如果 envVersion 为 release 的时候是正常的。出现这种现象的原因可能是腾讯的bug吧,至少截止20200630是这样的,希望以后能修复吧。

    展开全文
  • wx.reLaunch和wx.navigateTo,wx.navigateTo的区别

    万次阅读 多人点赞 2019-03-23 11:18:05
    wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面...
  • wx.getStorage异步和wx.getStorageSync同步区别

    万次阅读 多人点赞 2018-11-20 15:57:50
    1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync) 可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB 2.localStorage 是永久存储 一...
  • wx.navigateTo、wx.redirectTo、wx.reLaunch、wx.switchTab和wx.navigateBack有什么区别呢? wx.navigateTo: 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别...
  • 实例1: wx.messageBox和wx.FutureCall函数用法 def ShowMessage(self) wx.MessageBox('Download completed!!!', 'Info', wx.OK | wx.ICON_INFORMATION) #调用定时器函数,5秒后执行ShowMessage函数 wx....
  • 微信小程序 wx:if wx:elif wx:else 多条件判断 &lt;view wx:if="{{a}}"&gt;&lt;/view&gt; &lt;view wx:if="{{a||b}}"&gt;&lt;/view&gt; &lt;view wx:if=...
  • 关注公众号“码农帮派”,查看更多系列技术文章: wxPython各种控件用法官方手册:http://xoomer.virgilio.it/infinity77/wxPython/widgets.html (12)表格, wx.grid.Grid,构造函数: ...import wx.gr...
  • 关于小程序wx.getUserProfile接口

    万次阅读 多人点赞 2021-03-05 12:12:49
    关于小程序wx.getUserProfile接口的调用 最近微信小程序对于审核小程序提出了带有wx.login、wx.getUserInfo接口的调整,并提出了一个新的接口供开发者调用 下图是对于新的接口的官方文档详情 点击前往官网查看更多...
  • 先是存储wx.setStorage Page({ data: { testnum:""//设置测试参数 }, test:function(){ var Num = this.data.testnum; wx.setStorage({//存储到本地 key:"testNum", data:Num }) } ...
  • 初心-杨瑞超个人博客...wx.clearStorage 清理本地数据缓存 wx.clearStorageSync wx.clearStorage 的同步版本 wx.getStorage 从本地缓存中异步获取指定 key 的内容 wx.getStorageInfo 异步获取当前storage的...
  • 如果用一句话来表明navigator和API中wx.系列的跳转有什么区别,那就是navigator是在wxml中用标签添加open-type属性来达到和wx.系列一样的效果. navigator的属性值如下图所示图中可以看到经过设置open-type可以达到wx...
  • 微信小程序-位置授权-2020-2-14 1、app.json "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口 ...wx.authorize({ scope: 'scope.userLocation', succes...
  • wx.setStorage和wx.setStorageSync

    千次阅读 2019-07-15 10:01:42
    尽量使用wx.setStorage异步储存 同步的可能会报错
  • 前言     StorageSync是Storage的同步版本 ...wx.setStorage({ key:"key", data:"value" }) // getting wx.getStorage({ key: 'key', success (res) { console.log(res.dat...
  • wx.setStorage、wx.getStorage和wx.getStorageSync进行页面间传值 先是存储wx.setStorage Page({ data: { testnum:""//设置测试参数 }, test:function(){ var Num = this.data.testnum; wx....
  • 今天遇到这样一个问题。 错误代码: <view class="wrap">...no}}" class="warp-list" wx:for="{{bagesList}}" wx:key="id"> <view bindtap="goDetail" data-id="{{item.id}}"> <...
  • 1、wx.login 前端使用wx.login是获取登录凭证(code),将code发送给后台,后台向微信发送请求获取用户的唯一标识(openid)及本次登录的会话密钥(session_key),然后后台传回前台自定义的登录状态,以及自定义的...
  • 关注公众号“码农帮派”,查看更多系列技术文章: wxPython各种控件用法官方手册:... (5)单选项,wx.RadioButton,构造函数: """ __init__(self, Window parent, int id=-1, String l...
  • wx.showToast(Object object) 显示消息提示框 wx.showToast参数 object.icon 的合法值 wx.hideToast(Object object) 隐藏消息提示框 wx.hideToast参数 例如: 效果展示 首先找一张图片,命名CSDN....
  • wx.navigateTo/wx.redirectTo 无效

    万次阅读 多人点赞 2017-03-01 19:13:12
    在微信小程序开发过程中,如果你出现了在其他地方可以正常跳转,但是此时就是不行,不知道为什么。分析原因:1.... 2.你的url地址写对了吗,...wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转,要跳转到tabBar
  • wx:if和block wx:if

    千次阅读 2018-03-05 14:58:36
    wx:if在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块:&lt;view wx:if="{{condition}}"&gt; True &lt;/view&gt;也可以用wx:elif和wx:else来添加一个else块...
  • wx.setStorageSync与wx.setStorage的区别 关于同步缓存和异步缓存的区别: 同步缓存就是必须要同步方法处理完,程序才能继续向下执行。 异步方法无论方法执行成功与否,都会继续向下执行。 微信小程序中以Sync...
  • 关注公众号“码农帮派”,查看更多系列技术文章: wxPython各种控件用法官方手册:... (0)字体,wx.Font, 构造函数: """ __init__(self, int pointSize, int family, int style, int...
  • 小程序wx.getUserProfile怎么使用 官方:2021年4月13日后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息 现在我们开始使用wx.getUserProfile来更换之前的wx.getUserInfo接口或 直接上代码 wxml: ...
  • 微信小程序卡包打通文档缺失,特别是wx.addcard文档,没有对ext参数有详细的说明,可能会导致跳转卡包领取界面时,提示参数错误等问题。因为小程序卡包文档缺失的问题,我在开发过程中遇到各种问题,但是最终成功...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,327
精华内容 18,930
关键字:

wx