美文网首页
小程序之旅(不定时更新中)

小程序之旅(不定时更新中)

作者: 全栈的猫南北 | 来源:发表于2021-11-02 14:36 被阅读0次

    扫普通链接二维码打开小程序

    bug解析二维码失败:非小程序码.需要先发布才能通过二维码编译进行测试(可以通过版本随时控制是否上线)。 WechatIMG598.jpeg

    测试:一定要确保生成的二维码链接和下图测试链接一致!

    WechatIMG599.jpeg

    代码里获取二维码携带的参数

    onLoad: function (options) {
            let q = decodeURIComponent(options.q)
            let param = util.paramsToObj(q)
            console.log(param);
            debugger
            if (param.id) {
    

    小程序操作上个页面

       let pages = getCurrentPages();
        let beforePage = pages[pages.length - 2];
        beforePage.getgetUserInfo()//操作上个页面方法
        beforePage.setData({
          activeTab:'mine', 
        })//给上个页面赋值
        wx.navigateBack()
    

    小程序操作组件子页面

      this.selectComponent('#category').getMore()//在当前页面调用
    
    //在子页面或者组件的methods方法里调用
            getMore() {
                debugger
                this.getList()
            }
    
    

    ————————————————————————————————————

    微信小程序数据传递方式:https://www.cnblogs.com/michaelxuzhi/p/11486573.html
    不同页面传多个参数:用 "+" 将两个值相连即可。

    // wx.navigateTo({ 
    //     url:"../index/index?id=" + postId + "&sex=" + this.data.sex 
    // })
    

    ————————————————————————————————————
    给data中的对象中的属性赋值,属性名称要加引号或者['']

    this.setData({
        'form.planToDate': e.detail.value
    });
    

    ————————————————————————————————————
    label文字不换行,加style="white-space:nowrap ;"

    style="white-space:nowrap ;"
    

    label文字换行,加style="white-space:pre-wrap"

        <view wx:if="{{label}}" style="font-size: 24rpx;" class="lineClamp_1" style="white-space:pre-wrap">
                <p>{{label}}</p>
                </view>
    

    ————————————————————————————————————
    小程序自封装的组件

     /**
       * 组件的对外属性
       */
      properties: {
    fileList:{type:Array,value:[]},
          limit:{
              type: [String,Number],
              value:5
          },
        size:{
            type: String,
            value: '150rpx'
        },
        width:{type: String,value: ''},
        height:{type: String,value: ''},
        label:{type: String,value: ''},
      },
      /**
       * 组件的初始数据
       */
      data: {
        localurl:'',
        imgList:[],
      },  
      /**
       * 组件的回调方法
       */
        this.triggerEvent('complete',{item:JSON.parse(info.data),list:this.data.imgList})
      /**
       * 组件的使用方法
       */
       <AddImgPicker  label="仅png,rpg格式"    fileList="{{goodsForm.imageList}}" bindcomplete="handleComplete"  limit="{{1}}"></AddImgPicker> 
    
    

    父视图向子视图的组件传递事件或通知:
    .xml

    id="category" 定义组件的标签,然后在js里调用
      <category id="category" trades-id="{{tradesId}}"></category>
    

    .js

      /**
       *在父视图里调用组件的getMore()方法
       */
      onReachBottom: function () {
        
         this.selectComponent('#category').getMore()
      },
    

    ————————————————————————————————————
    字符串拼接:js里直接用➕就可以,试图xml里用

    <view>{{"hello" + name}}</view>
    
    wx.showModal({
      content: '确定要删除'+item.name+'吗?',
    

    小程序开发工具版本管理

    从库里下载好.zip之后一定要做下面的操作
    第一步是添加你库的账号密码,否则不识别无法推送


    WechatIMG16063.jpeg

    第二部在“远程”里添加库的地址,名字就是库的名字


    WechatIMG16065.jpeg
    第三部也是最重要的一定要重置master,否则无法垃取推送
    WechatIMG16064.jpeg
    ————————————————————————————————————

    1、小程序适合做简单的、用完即走
    2、低频率使用的
    3、对性能要求不高
    ————————————————————————————————————
    小程序开发工具常用快捷键
    option+shift+f 整理代码
    option+esc 提示代码
    command +f 搜索
    command +shift+f 全局搜
    ————————————————————————————————————
    先静后动,先样式再数据
    小程序的配置ui都是:就近原则(在app.wxss中配置弱于页面本身的.wxss)
    ————————————————————————————————————

    小程序里图片引用或者设置flase加{{}}:

    vertical="{{false}}”
    

    ————————————————————————————————————
    小程序里的if else判断字符串相同要===和单引号

    wx:if="{{bottmomState==='待审核'}}"
          <image wx:if="{{i}}" src="/images/icon/star.png"></image>
            <image wx:else src="/images/icon/none-star.png"></image>
    

    ————————————————————————————————————
    小程序里的for循环:引用要用花双括号,默认item和index

    <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    

    ————————————————————————————————————
    小程序打断点加debugger,输出是

    console.log(data);
    
    debugger
    

    ————————————————————————————————————
    Bindtap是冒泡事件不仅执行自己还执行父试图的点按事件,catchtap不是,只执行自己
    ————————————————————————————————————
    “{{…}}”中…可以平铺{}中的数据,就可以不再用item去指定了

      <template is="postItem" data="{{...item}}"/>
    

    ————————————————————————————————————
    自定义属性必须是以data开头,会在.js文件的点击方法里属性字母转成小写,连字符的第一个字母会转成大写

      var postId = event.currentTarget.dataset.postid;//会把所有自定义的属性字母转成小写,连字符后的字母转成大写,首字母小写,驼峰命名法
    

    相关文章

      网友评论

          本文标题:小程序之旅(不定时更新中)

          本文链接:https://www.haomeiwen.com/subject/tbnxzltx.html