环境准备
- 注册账号.
- 下载开发者工具
目录结构
对比web开发
基本目录
用法
如果你了解vue 你会发现 微信提供的API特别好上手
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="myList">
索引:{{index}}
值:{{item.name}}
</view>
bolock标签 相当于vue中的<template>标签或者react中的</>
<text wx:if="{{visible}}">显示</textr>
<text hidden="{{false}}">hidden属性也可以隐藏</textr>//hidden相当于display:none控制是否隐藏,也就是v-show
<input type="text" bindinput="change"/>//相当于@input
<button bindtap="add" data-operation="{{1}}">+1</button> //bindtap相当于@click，定义好参数通过元素对象获得参数然后进行处理
关于data
- 访问数据需要用this.data.num的方式，和vue中直接访问this.num的方式不一样
- 但更新数据使用的却是react那一套，setData要接受一个新的值，而不是直接改原来的值，只有通过setData才能出发重新渲染
- 如果函数直接定义在Page接受的对象中，不用像vue要写methods包裹住,但是定义在组件中需要用methods包裹住
Page({
data: {
msg:"aslan",
num:0
},
add(e){
const param = e.currentTarget.dataset.operation
this.setData({num:this.data.num+param})
}
})
样式
支持@import导入，新的单位rpx，支持选择器，但是不支持通配符"*"
wx中使用less
编辑器是vscode 安装插件easy less,设置vscode settings.json文件添加下列代码
"less.compile": {
"compress": false, //是否压缩
"sourceMap": false, //是否生成map文件
"out": true, // 是否输出文件，false为不输出
"outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'
},
常用标签
自定义组件以及传参
和创建page文件一样四个文件，不过不需要配置路由，在需要引入的Page页面的json文件中填写usingComponents选项
//demo (父组件)的json文件配置
"usingComponents": {
"Son":"../../components/Son/Son"
}
//父组件wxml 中使用Son组件并且传参给它
<Son money="{{num}}" bindUpDateMoney="UpDateMoney" />
//父组件js文件中定义UpDateMoney的方法
data:{
money:2
},
UpDateMoney(newValue){
this.setDate({num:newValue})
}
//Son组件xwml文件定义点击
<text>我是子组件:demo给我{{money}}</text>
<button bindtap="add">+1</button>
//Son组件js文件接收参数
Component({
properties: {
money:{
type:Number
}
},
methods:{
add(){
this.triggerEvent('UpDateMoney',1)//触发更新数据
}
}
})
属性对应表
生命周期
应用生命周期
- onLaunch在应用启动的时候触发 可以用来获取用户的个人信息
- onShow应用被用户看到的时候触发 对应用的数据或者页面效果进行重置
- onHide 应用被隐藏的时候触发 暂停或清除定时器
- onError应用的代码发生了报错的时候就会触发 收集用户错误信息，将错误信息发送到后台去
- onPageNotFound 当页面找不到就会触发 如果找不到可以进行重定向
页面生命周期
项目搭建
总结
小程序的坑需要自己踩，黑盒太多，请求不支持patch，不能用ref，不能操作dom，canvas封装暴露出来的接口很难用，随处可见的回调，当然官方有他自己的考虑，这里不评论好坏
