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

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

作者: 全栈的猫南北 | 来源:发表于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;//会把所有自定义的属性字母转成小写,连字符后的字母转成大写,首字母小写,驼峰命名法

相关文章

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

    扫普通链接二维码打开小程序 bug解析二维码失败:非小程序码.需要先发布才能通过二维码编译进行测试(可以通过版本随...

  • 小程序商店来了

    做了个小程序商店微信公众号,名字叫[xiao的程序商店],收集了已经发布的所有小程序,并每天定时更新,欢迎大家关注

  • 5. 邮件定时发送

    1.生活中的定时任务 定时推送,签到 QQ定时发说说邮件 蚂蚁森林定时产生能量。微信公众号不步数的更新 手机定时开...

  • Python3-定时任务四种实现方式

    最近做一个小程序开发任务,主要负责后台部分开发;根据项目需求,需要实现三个定时任务: 1>定时更新微信token,...

  • 小程序里面h5缓存问题

    原生小程序代码更新可以通过删除小程序来清除缓存,如果不手动清除,官方给出的解释是24小时内会更新内嵌在小程序里面的...

  • 2018-12-25 小程序踩坑之旅

    小程序踩坑之旅 小程序子组件监听父组件的变化: app.js中 page中 神奇的textarea 不光是text...

  • 小程序常用方法(更新中)

    #pragma mark --本地缓存--基本数据 var userData = wx.getStorageSyn...

  • 小程序商店, 持续更新中

    按 Ctrl+F 或者 ⌘+F(Mac)可快速查找 点击相应名称后打开二维码页面, 用微信扫码即可使用, 或者在小...

  • 胡狸的蜂窝36计之“打草惊蛇”

    漫画作者:Cee² 本期漫画就到此结束了,感谢你的支持 请搜索小程序“卖蜂蜜”,里面近期发布的文章哦,还会定时更新...

  • 胡狸的蜂窝36计之“隔岸观火”

    漫画作者:Cee² 本期漫画就到此结束了,感谢你的支持 请搜索小程序“卖蜂蜜”,里面近期发布的文章哦,还会定时更新...

网友评论

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

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