微信小程序

准备工作

访问微信公众平台官网,进行登录,点击文档,工具,下载,选择合适自己的电脑版本,安装微信开发者工具,选择开发版

文件概况

如图,文件夹pages即我们所有的页面数,每个页面文件夹有js,json(对页面的内容进行一些配置),wxml,wxss文件,app.json是全局的配置,

• wxml中view标签相当于div标签,text相当于span标签
• 插值表达式 在.js中page({data:{ msg: ‘134’})中定义 在wxml中使用{{msg}}得到结果
• {{}}中支持表达式 三目也支持 支持运算
• for循环遍历 语法

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id"> // id是item中定义好的唯一值
	{{item.name}} 
	{{index}}
</view>
// 如果wx-for只有一层循环 item 和index可以省略

• 条件渲染

<view wx:if="{{true}}">2</view>
<view wx:elif="{{false}}">2</view>
<view wx:else="{{true}}">2</view>  // 通过创建删除

<view hidden="{{true}}">2</view>  // 显示
<view hidden="{{false}}">2</view> // 隐藏

• 小程序中input框和data中数据双向绑定 input框的bindInput事件 参数e事件 可以获取到输入的值 赋值给data中的数据时,使用

this.setData({
	num : e.datail.value
})

-绑定点击事件 bindtap 传参需要用自定义的属性 不能直接()中传

<button bindtap="handel" data-operation="{{1}}">+</button>

// js文件中定义的handel
handel(e){
	console.log(e)  // 可以找到传的参数   然后通过this.setData方法操作 
}

• rpx 文本中原先使用px的 变为rpx 设计稿750px 手机750rpx 则此手机1rpx= 1px
• wxss代码可以通过@import引入 只支持相对路径, 不支持通配符
• wess中使用less 需要在sitemap.json中设置配置才能使用
• image 存在默认宽高 320 *240
• 组件父传子
  
• slot 插槽 是一个占位符 当父组件调用子组件的时候 再传递标签过来 这些被传递的标签就会取代solt的位置
• app.js中定义的应用生命周期

onLaunch () {
	// 应用第一次启动时触发的生命周期
	// 可以获取用户的个人信息
},
onShow () {
	// 应用被用户看到触发生命周期
	// 对数据或页面效果进行重置
},
onHide () {
	// 应用隐藏时触发
	// 暂停或清除定时器
},
onError () {
	// 应用的代码发生报错时会触发
},
onPageNotFound () {
	//  页面找不到就会触发

}

• 页面生命周期

onLoad(){
	// 页面加载触发
	// 做一些异步数据请求,初始化页面数据
},
onShow(){
	// 页面被看见
	// 
},
onReady(){

},
onHide(){
	// 页面隐藏时触发  
},
onUnload(){
	// 监听页面卸载 
},
onPullDownRefresh(){
	// 监听用户下拉动作
	// 页面数据的重刷新
},
onReachBottom: function () {
	// 页面上拉触底事件的处理函数  前提条件页面必须要有上下滚动条
	// 上拉加载上页数据
},
onShareAppMessage: function () {
	// 用户点击右上角分享时触发
},
onPageScroll () {
	//页面滚动就可以触发
},
onReSize(){
	// 页面尺寸发生改变时触发
	// 横竖屏切换时触发
},
onTabItemTap(){
	//1必须要求当前页面也是tabbar页面
	//2 点击自己的tabItem才会触发 
}