微信小程序 Helloworld

image.png

快捷键

image.png

image.png

js 逻辑 json 配置 wxss 样式 wxml 结构文件

navigationBarTitleText窗口标题 backgroundColor 背景色

image.png

enablePullDownRefresh 下拉刷新

image.png

tabBar

image.png

控制超时时间

image.png

页面配置文件

image.png

小程序生命周期APP

onLaunch 当小程序初始化完 onShow 小程序启动 onHide

Page生命周期

onLoad: 页面加载完，一个页面调用一次，可以获取wx.navigateTo 和wx.redirectTo 和 query onShow onReady 初次渲染完 onHide onUnload onPullDownRefresh 下拉刷新

全局的数据在app.js中可以设置

globalData:{ userInfo:null }

页面中的数据设置

Page({ data: { motto: '呵呵', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') },

绑定事件

image.png

动态设置数据

this.setData({ userInfo:userInfo })

view,image,text

image.png

判断

wx:if="{{length > 2}}" wx:else

image.png

<block wx:if=""

image.png

wx:for="{{}}" 循环

image.png

{{index}} {{item.name}}

重命名下标

image.png

for 1到10

image.png

block

image.png

使用模板

image.png

template

导入其他页面

<import src="template.wxml" />

image.png

原原本本导入其他页面include

image.png

事件类型

冒泡事件：touchstart,touchmove,touchcancel,touchend,tap,longtap 非冒泡事件：submit,input, scroll

事件绑定：bindtap

image.png

事件对象event属性

type timeStamp target

image.png

touches

image.png

detail

wxss

rpx,rem

image.png

@import "common.wxss"