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

2021-11-02  本文已影响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;//会把所有自定义的属性字母转成小写,连字符后的字母转成大写,首字母小写,驼峰命名法
上一篇 下一篇

猜你喜欢

热点阅读