微信小程序

获取全局变量

app.js

App({})  

 

globalData

 

var app=getApp();  app.obj

xxx.js
page({});

模块化 暴露接口 引用

module.exports={}

var obj=require(".js");

 

---

 

样式：

page → body

单位：rpx

display:flex;

flex-direction: row(水平 起点左) | row-reverse (水平 起点右)| column | column-reverse;

align-items: center；

详情：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

---

事件绑定：

bindtap||catchtap  事件冒泡||捕获

---

页面导航 跳转

wx.navigateTo({})  wx.redirectTo({}) wx.switchTab({})跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

 

 

wx.navigateTo()是从父页面跳转到子页面的方法（限制五级跳转），有返回按钮，当执行这个函数的时候，被跳转页面触发onHide事件；
wx.redirectTo()是平行页面跳转，无返回按钮，当执行这个函数的时候，被跳转页面触发onUnload事件。

2、tap事件，但是要写成bindtap或者catchtap，默认规定
3、bug：点击一次执行事件两次，解决方法：关闭程序重新打开即可
4、wx.navigateTo({ url: '../posts/post', })是跳到下一子级的页面，有对应的返回按钮，当前页面触发的是onHide（）事件。（限制五级跳转！！！）
 wx.redirectTo({ url: '../posts/post', })是平行页面跳转（关闭当前页面），无返回按钮，触发的是onUnload（）事件。

 

---

 

 模板 及 引用

<template name=""></template>

<import src=".wxml" />

<template is="" />

模板 .wxml .wxss

@import ".wxss"

---

swiper组件

swiper-item设置高度宽没有用需要设置到swipe上

image有默认宽高

 

自定义属性

存储信息   data-xx

获取  event.currentTarget.dataset.xx;

---

 

页面之间数据传输

/xxx？idx="data-xx"

onload: (option)

option.idx  获取

---

 

本地存储

wx.setStorageSync(name,value)

wx.getStorageSync({

　　key:'',

　　success:function (res){ res.data}

　　//接口调用的回调函数,res = {data: key对应的内容}

})

---

api 界面

wx.showToast 收藏

wx.showModal 确定取消

wx.showActionSheet 分享

success:function (res){ res.属性} //ture||false  分享数组

---

发送服务器请求 wx.request({})    HTTPS 请求

 

---

 

组件化编程

上拉加载：

标签使用：scroll-view  可滚动视图区域。(竖向滚动时，需要给<scroll-view/>一个固定高度);

 

loading状态：

wx.showNavigationBarLoading()；

wx.hideNavigationBarLoading()；

下拉刷新

---

icon标签

search

input组件

 

数据绑定 操作dom

 

图片裁剪

 

scroll-view

---

 

form表单提交

原生js jq

1。获取每一个dom节点 在用vlue的方法去获取dom值 拼接成对象 然后把所有表单值发送给服务器