数据缓存setStorageSync和getStorage
//获取输入值 getInput: function(e) { var self = this; self.setData({ storage: e.detail.value }) }, //存储输入值 saveInput: function() { var self = this; wx.setStorageSync('storage', self.data.storage) }, output: function () { var self = this; wx.getStorage({ key: 'storage', success: function (res) { // success self.setData({ storage2: res.data }) } }) }数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view> Page({ data: { zero: 0 } })最终组合成数组[0, 1, 2, 3, 4]。
对象
<template is="objectCombine" data="{{for: a, bar: b}}"></template> Page({ data: { a: 1, b: 2 } })最终组合成的对象是 {for: 1, bar: 2}
扩展运算符 … 来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } })最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
对象的 key 和 value 相同，也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template> Page({ data: { foo: 'my-foo', bar: 'my-bar' } })最终组合成的对象是 {foo: ‘my-foo’, bar:‘my-bar’}。
微信小程序-消息提示框
wx.showToast(OBJECT) wx.showToast({ title:'成功', icon:'success', duration: 2000 }) wx.showToast({ title:'加载中', icon:'loading', duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000) wx.showModal({ title:'提示', content:'这是一个模态弹窗', success:function(res) { if(res.confirm) { console.log('用户点击确定') } } })wx.showActionSheet(OBJECT)
显示操作菜单
wx.showActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!res.cancel) { console.log(res.tapIndex) } } })wx.setNavigationBarTitle(OBJECT)
动态设置当前页面的标题。
wx.showNavigationBarLoading()
在当前页面显示导航条加载动画。
wx.hideNavigationBarLoading()
隐藏导航条加载动画。
页面跳转：
wx.navigateTo(OBJECT)
wx.navigateTo({ url:'test?id=1' })wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。
var animation = wx.createAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0 })wx.hideKeyboard()
收起键盘
wx.stopPullDownRefresh()
停止当前页面下拉刷新
API 基础
/** project └── src ├── components | └── child.wpy ├── pages | ├── index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项（全局样式配置、声明钩子等） **/ // index.wpy <template> <!-- 注意，使用for属性，而不是使用wx:for属性 --> <repeat for="{{list}}" key="index" index="index" item="item"> <!-- 插入<script>脚本部分所声明的child组件，同时传入item --> <child :item="item"></child> </repeat> </template> <script> import wepy from 'wepy'; // 引入child组件文件 import Child from '../components/child'; export default class Index extends wepy.page { components = { // 声明页面中要使用到的Child组件的ID为child child: Child } data = { list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}] } } </script> <template> <view class="child1"> <child></child> </view> <view class="child2"> <anotherchild></anotherchild> </view> </template> <script> import wepy from 'wepy'; import Child from '../components/child'; export default class Index extends wepy.page { components = { //为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题 child: Child, anotherchild: Child }; } </script> /** project └── src ├── components | └── child.wpy ├── pages | ├── index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项（全局公共配置、公共样式、声明钩子等） **/ // index.wpy <template> <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 --> <child></child> </template> <script> import wepy from 'wepy'; //引入组件文件 import Child from '../components/child'; export default class Index extends wepy.page { //声明组件，分配组件id为child components = { child: Child }; } </script> // 错误示例 import wepy from 'wepy'; export default class MyComponent extends wepy.component { methods = { bindtap () { let rst = this.commonFunc(); // doSomething }, bindinput () { let rst = this.commonFunc(); // doSomething }, //错误：普通自定义方法不能放在methods对象中 customFunction () { return 'sth.'; } }; } // 正确示例 import wepy from 'wepy'; export default class MyComponent extends wepy.component { methods = { bindtap () { let rst = this.commonFunc(); // doSomething }, bindinput () { let rst = this.commonFunc(); // doSomething }, } //正确：普通自定义方法在methods对象外声明，与methods平级 customFunction () { return 'sth.'; } } import wepy from 'wepy'; export default class MyPage extends wepy.page { // export default class MyComponent extends wepy.component { customData = {} // 自定义数据 customFunction () {} //自定义方法 onLoad () {} // 在Page和Component共用的生命周期函数 onShow () {} // 只在Page中存在的页面生命周期函数 config = {}; // 只在Page实例中存在的配置数据，对应于原生的page.json文件 data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定 components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件 mixins = []; // 声明页面所引用的Mixin实例 computed = {}; // 声明计算属性（详见后文介绍） watch = {}; // 声明数据watcher（详见后文介绍） methods = {}; // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明 events = {}; // 声明组件之间的事件处理函数 } import wepy from 'wepy'; export default class MyAPP extends wepy.app { customData = {}; customFunction () { } onLaunch () {} onShow () {} config = {} // 对应 app.json 文件 globalData = {} }小程序被分为三个实例：小程序实例App、页面实例Page、组件实例Component
import wepy from 'wepy'; // 声明一个App小程序实例 export default class MyAPP extends wepy.app { } // 声明一个Page页面实例 export default class IndexPage extends wepy.page { } // 声明一个Component组件实例 export default class MyComponent extends wepy.component { } <template lang="wxml"> <view> </view> </template> <script> import wepy from 'wepy'; export default class Com extends wepy.component { components = {}; data = {}; methods = {}; events = {}; // Other properties } </script> <style lang="less"> /** less **/ </style> <script> import wepy from 'wepy'; import Counter from '../components/counter'; export default class Page extends wepy.page { config = {}; components = {counter1: Counter}; data = {}; methods = {}; events = {}; onLoad() {}; // Other properties } </script> <template lang="wxml"> <view> </view> <counter1></counter1> </template> <style lang="less"> /** less **/ </style> <script> import wepy from 'wepy'; export default class extends wepy.app { config = { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" } }; onLaunch() { console.log(this); } } </script> <style lang="less"> /** less **/ </style> <style lang="less" src="page1.less"></style> <template lang="wxml" src="page1.wxml"></template> <script> // some code </script>wepy.config.js配置文件说明
let prod = process.env.NODE_ENV === 'production'; module.exports = { 'target': 'dist', 'source': 'src', 'wpyExt': '.wpy', 'compilers': { less: { 'compress': true }, /*sass: { 'outputStyle': 'compressed' }, postcss: { plugins: [ cssnext({ browsers:['iOS 9', 'Android 4.4'] }) ] },*/ babel: { 'presets': [ 'es2015', 'stage-1' ], 'plugins': [ 'transform-export-extensions', 'syntax-export-extensions', 'transform-runtime' ] } }, 'plugins': { } }; if (prod) { // 压缩sass module.exports.compilers['sass'] = {'outputStyle': 'compressed'}; // 压缩less module.exports.compilers['less'] = {'compress': true}; // 压缩js module.exports.plugins = { 'uglifyjs': { filter: /\.js$/, config: { } }, 'imagemin': { filter: /\.(jpg|png|jpeg)$/, config: { 'jpg': { quality: 80 }, 'png': { quality: 80 } } } }; } import wepy from 'wepy'; async onLoad() { await wepy.login(); this.userInfo = await wepy.getUserInfo(); } onLoad = function () { var self = this; wx.login({ success: function (data) { wx.getUserInfo({ success: function (userinfo) { self.setData({userInfo: userinfo}); } }); } }); } 示例代码： import wepy from 'wepy'; export default class Index extends wepy.page { getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({data: 123}); }, 3000); }); }; async onLoad() { let data = await this.getData(); console.log(data.data); }; } // index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel> <counter1 :num="myNum"></counter1> <counter2 :num.sync="syncNum"></counter2> <list :item="items"></list> </view> </template> <script> import wepy from 'wepy'; //引入List、Panel和Counter组件 import List from '../components/list'; import Panel from '../components/panel'; import Counter from '../components/counter'; export default class Index extends wepy.page { //页面配置 config = { "navigationBarTitleText": "test" }; //声明页面中将要使用到的组件 components = { panel: Panel, counter1: Counter, counter2: Counter, list: List }; //可用于页面模板中绑定的数据 data = { myNum: 50, syncNum: 100, items: [1, 2, 3, 4] } } </script>吹逼交流群：711613774
程序员哆啦A梦 认证博客专家 博客专家 简书万粉优秀创作 掘金优秀作者 我是程序员哆啦A梦，蓝胖子，简书万粉优秀创作者，掘金优秀作者、博客专家，云+社区社区活跃作者，致力于打造一系列能够帮助程序员提高的优质文章。网站@http://www.dadaqianduan.cn