微信小程序代码大全
https://blog.csdn.net/fenxiangjun/article/details/54429666
https://blog.csdn.net/ufo00001/article/details/72461384
http://www.jiaoben.it/product/view27.html 9.9元
style 样式层
<style scoped lang="less">
//导包
@import '../assets/styles/common/common.less';
//样式
.btn{
position: relative;
width: 375rpx;
...
}
</style> - 常用属性
所有涉及到上下左右的都有多种写法 ([上 右 下 左] [上 左右 下] [上下 左右] [上下左右])
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。- 其他常用
//距离
xxx: auto; //属性自适应[margin height flex]
width: 375rpx; //宽
height: 78rpx; //高
line-height: 78rpx; //行高
border: 5rpx solid #000; //边框 (border: 边框大小 solid 边框颜色;)
z-index: 150; //海拔高度(越大越到上面)
transform: translate(-50%,-50%);//相对自己XY调整距离
transform: translateY(-50%); //相对自己Y调整距离
transform: translateX(-50%); //相对自己X调整距离
//margin
margin: ; //margin的多种写法,padding同理
margin-xxx: 35rpx; //距离指定方向(xxx=>top/bottom/left/right)
//padding
padding-xxx: 100rpx; //padding 指定方向(xxx=>top/bottom/left/right)
box-sizing: border-box; //默认是往外padding,如果想往内padding需要设置
//文字
font-size: 34rpx; //字体大小
text-align: center; //文字的对齐方式
color //文本的颜色
//颜色
background-color: #fdd100; //背景眼色
overflow: visible !important; //溢出可见
//形状
border-xxx-radius //圆角(大到一定程度就是圆xxx=>top/bottom/left/right)
//布局
white-space: nowrap; //规定段落中的文本不进行换行：
script 逻辑层
注意事项
- 1 : 所有字符串用 ’ ’ (单引号)
- 2 : 所有句尾不能用 ; (分号)
- 3 : 方法在类中的写法和在代码块中的写法不同
整体流程
- 页面
1 export default class 名称 extends wepy.page{} - 组件
1 export default class 名称 extends wepy.component {}
2 组件的官方文档说明
3 使用方式
编写组件
页面类import
页面类components里面声明
页面template里面使用- app
1 export default class extends wepy.app {}
官方文档
//导包
import wepy from 'wepy'
export default class Index extends wepy.page {
//生命周期各种回调
onLoad(options){} //生命周期函数--监听页面加载 可以接受传过来的值
onReady(){} //生命周期函数--监听页面初次渲染完成
onShow() {} //生命周期函数--监听页面显示
onHide(){} //生命周期函数--监听页面隐藏
onUnload(){} //生命周期函数--监听页面卸载
//其他回调
onPullDownRefresh(){} //页面相关事件处理函数--监听用户下拉动作
onReachBottom(){} //页面上拉触底事件的处理函数
onShareAppMessage(){} //用户点击右上角转发
onPageScroll(){} //页面滚动触发事件的处理函数
onTabItemTap(){} //当前是 tab 页时，点击 tab 时触发
//配置区
config = {
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 //导航栏背景颜色，如"#000000"
navigationBarTextStyle String white //导航栏标题颜色，仅支持 black/white
navigationBarTitleText String //导航栏标题文字内容
navigationStyle String default //导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 微信版本 6.6.0
backgroundColor HexColor #ffffff //窗口的背景色
backgroundTextStyle String dark //下拉 loading 的样式，仅支持 dark/light
backgroundColorTop String #ffffff //顶部窗口的背景色，仅 iOS 支持 微信版本 6.5.16
backgroundColorBottom String #ffffff //底部窗口的背景色，仅 iOS 支持 微信版本 6.5.16
enablePullDownRefresh Boolean false //是否开启下拉刷新，详见页面相关事件处理函数
onReachBottomDistance Number 50 //页面上拉触底事件触发时距页面底部距离，单位为px
}
//props 传值,也就是声明组件的属性(组件专用)
props = {
属性名: {
type: Number, //属性类型
default: 0, //属性的值
twoWay: true //是否动态传到父页面
},
...
}
//组件声明区(可以直接在template使用组件)
components = {
Rowact: Rowact, //组件名:组件名
...
}
//数据区
data = {
变量名: 1, // 数字类型
变量名: false, // boolean类型
变量名: '', // 字符串类型
变量名: {}, // 对象类型
变量名: [], // 数组类型
}
//标签绑定的方法区
methods = {
方法名: () => {}, //无参方法
方法名: 参数名 => {}, //一个参数方法
方法名: async 参数名 => {} //一个参数加异步方法
}
//WePY组件事件处理函数对象，存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数
events = {
}
}
await //等待方法执行完 例如: let initData = await BW.bwRequest('')
this //当前类对象
this.$parent //app类对象
async //异步修饰
succallback //成功的回调函数
.sync //与组件动态传值 例如::name.sync="currenIndx"
this.$apply() //刷新页面
console.log(err) //控制台打印
setInterval() //设置定时器
clearInterval(timer) //取消定时器
方法的使用
//类中的写法
方法名(){} //无参方法
方法名(参数名, 参数名...) //一或者多参数方法
async 方法名(参数名) {} //加异步方法
//代码块中的写法
方法名: () => {}, //无参方法
方法名: 参数名 => {}, //一个参数方法
方法名: (参数名, 参数名) => {}, //多个参数名
方法名: async 参数名 => {} //加异步方法
//调用方法
对象.方法名() //无参调用
对象.方法名(参数) //有参调用
对象.方法名({参数名:参数}) //指定参数调用其他函数API
List
concat // 合并列表
template 控件层
- from 表单
<form report-submit bindsubmit="changeCondi" data-cateid="{{item.CateId}}" data-indx="{{index}}">
<button class="form-btn" formType="submit"></button>
</form>
report-submit //Boolean 是否返回 formId 用于发送模板消息
bindsubmit //EventHandle 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset //EventHandle 表单重置时会触发 reset 事件
data-变量名 //携带数据
formType="submit" //(子布局用) 提交表单