小程序之旅(不定时更新中)
扫普通链接二维码打开小程序
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;//会把所有自定义的属性字母转成小写,连字符后的字母转成大写,首字母小写,驼峰命名法