微信小程序

diedui6626

于 2016-12-13 15:11:00 发布

阅读量84

点赞数

文章标签： json ui 墨刀

原文链接：http://www.cnblogs.com/yxiaoqian/p/6170072.html

版权

目录结构：pages/

　　　　　　　　index/

　　　　　　　　　　index.js 配置文件入口，page()

　　　　　　　　　　index.wxml 配置页面布局、UI

　　　　　　　　　　index.wxss 页面的样式文件，可选，可覆盖app.wxss

　　　　　　　　　　index.json 页面当前窗口定义 "window"，可选，可覆盖app.json 的window中的配置

　　　　　app.js App() 定义一个实例化方法，传入config配置项；定义项目的启动入口

　　　　　app.json "pages":数组，配置每个页面；"window":JSON对象，定义当前窗口设置

　　　　　app.wxss 项目样式（可选）

数据的双向绑定：.wxml:{{text}} 在 .js 里定义data:{text:'xxx'}

　　　　　　　　　　　　bindtap='btnClick' btnClick:function(){ this.setData({text:'new xxx'})}

渲染模式：条件渲染判断标签<view wx:if="{{false}}">{{text}}1</view> 如果为false 就掩藏，为true 就显示。<view wx:else >{{text}}2</view>

　　　　循环标签：<view wx:for="{{['aaa','bbb','ccc']}}">{{index}}-{{item}}</view> //其中默认为item 读取到数组中的每一项，可以通过wx:for-item='news-item' 自定义；

<view wx:for="{{['aaa','bbb','ccc']}}" wx:for-item="itemx">{{itemx}}</view>

模版饮用：

方式1:include 相当于把全部内容包括节点引入进来：<include src="../templates/header" />

方式2:import 导入<template> 需要指定name值

<template is='footers' data="{{text:'导入的设置内容...'}}" /> 同时设置data来激活模版中的{{text}}

事件：

点击事件 tap

长按事件 longtap

触摸事件 touchstart touchend touchmove touchcancel

其他 submit input...

事件冒泡：点击事件、长安事件、触摸事件都属于冒泡事件

通过bindtap绑定的事件会触发事件冒泡

通过catchtap绑定的事件不会触发事件冒泡

事件的对象：currenttarget是当前绑定的事件

　　　　　　target是触发的事件源是冒泡的根元素

　　　　　　dataset 自定义属性 data-id='' data-title=''

api配置：参考官网https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161122

app的生命周期：

App({
onLaunch: function () {
数据加载
},
onShow: function () {
显示
},
onHide: function () {
切换至后台时　　
}
})

可在app里定义全局变量或方法，子页面通过var app= getApp() ; app.xxx获取

页面page()的生命周期

Page({
data:{
String1
},
onLoad:function(options){ 1
// 页面初始化 options为页面跳转所带来的参数
String2
},
onReady:function(){ 3
// 页面渲染完成
String3
},
onShow:function(){ 2
// 页面显示、进入此页面触发
String4
},
onHide:function(){
// 页面隐藏,\跳转至其他页面时触发、切换至后台
String5
},
onUnload:function(){
// 页面关闭、离开的此页面触发
String6
}
})

页面跳转：

方式1 wx.navigateTo({url:'../logs/logs?id=1'})

　　　　wx.redirectorTo({...}) 禁用返回

方式2 <navigator url='' redirector><view....</navigator> //加redirector 禁用了返回功能

布局
1 flex布局

flex container 容器的属性：

flex-direction 决定元素的排列方向

flex-wrap 决定元素是否换行 wrap-reverse;wrap; nowrap;

flex-flow:flex-direction和flex-wrap的简写 row nowrap;

justify-content 元素在主轴上的对齐方式 center; flex-start; flex-end; space-around均匀对齐 ; space-between两端对齐；

align-items 元素在交叉轴上的对齐方式 stretch （当元素没设置高度时，让item占据整个容器的高度）；baseline:以内在一行文字的对齐；center ； flex-start； flex-end；

flex item 元素的属性：

flex-grow 当空间多余时，元素的放大比例默认为0 1标示均匀充满主轴容器宽度。

flex-shrink 当空间不足时，元素的缩小比例默认为1 当空间不足时默认等比缩小；0不缩小

flex-basis 元素在主轴上占据的空间 300px;

flex 是grow shrink basis 的简写

order 定义元素的排列顺序

align-self 定义元素自身的对齐方式（会覆盖align-items)

2 相对布局绝对布局

relative 想对自身的定位

absolute 相对于最近的已定位的父元素进行的定位

动态伪类选择器(:link,:visited,:hover,:active,:focus)

状态伪类选择器(:enabled,:disabled, :checked) 按钮禁用选中

选择伪类选择器(:first-child,:last-child,:nth-child(),:nth-last-child(),:nth-of-type(),:nth-last-of-type(),:first-of-type,:last-of-type,:only-child,:only-of-type)

空内容伪类选择弃(:empty)

否定伪类选择弃(:not)

伪元素(::first-line第一行使用特定样式, ::first-letter第一个字符使用某种样式, ::before, ::after, ::selection) .text1::after{content:'...';}在text1文本后添加文本...

基础内容组件：icon text progress

视图容器组件：view scroll-view swiper

UI高级组件：

1 action-sheet <action-sheet hidden='{{}}' bindchange=''></action-sheet>

2 toast <toast hidden="{{toastHidden}}" duraction="1000"></toast>

3 loading <loading hidden="{{loadingHidden}}"></loading>

导航组件<navigator url='../logs/logs' redirect><view...</navigator>

地图组件<map ....>

画布 canvas