小程序笔记整理
1，新建页面
在index文件夹，右键 新建pages，写入名称，之后就会出现四个名称相同但是不同后缀名的文件;同时在app.json文件中自动生成路由。
2，父子组件传值
1，新建组件
在根目录中，新建components文件夹。
右键 新建compont，输入文件名，
在app.json中最后面设置
“usingComponents”:{ "avatar":"components/avatar";
}
在父组件中直接使用{{1111111}}
2，父传子
在子组件avatar中，properties:{
name:String,
age:{
value:12,
type:Number,//没有default和required 和validate
}
}
在父组件中<avatat age:"{{123}}">
3,子传父
在子组件中avatar.wxml页面中
在子组件中avatar.js页面中 methods中定义。tapChild(e){this.triggerEvent(toParent,{call:666})}
在父组件中 index.wxml
在父组件中 index.js文件中，写在pages中，不需要写在methods中 receivedCall(obj){console.log(obj)}
4,在小程序中没有watch监听，但是常用的是observer
1，properties:{
name:String,
age:{
value:12,
type:Number,//没有default和required 和validate，
observe(value){console.log('监听’value)}
}
}
2,在avatar.js中定义data:{sex:“男”},
和data同级 observers:{sex(value){console.log(‘全局监听’,value)}}
在attach中，触发一下，，，修改data或者data中值用this.setData
在avatar.js中，attached：function(){ setTimeout(()=>{this.setData,{sex:“女”}},1000}
3,跳转页面-两种方式
第一种 navigator 标签跳转
navigator标签类似于 a标签，在标签中添加URL属性，点击search这个iconfont，效果是跳转到second页面。
navigator 标签中 有type属性，属性有很多，分别对应uni-app中的跳转。
第二种 使用时间跳转并且实现传值
1，在index.wxml页面
2，在index.js页面
1,不需要写在methods中，
gotoSecond(){
url:"./second"
}
2,在index.js页面获取小程序全局唯一的app实例
const app = getAPP()；
在gotoSecond方法中添加传入的参数
gotoSecond(){
app.userInfo={ //这里的app，就是获取的惟一的实例
name:‘张三’,
age:20
}
url:"./second"
}
3，在second.js文件中
1，const app = getApp();
2,onload:function(options){
console.log(app.useInfo)
}
这样在点击跳转之后，会将定义的userInfo对象传递到second
5.页面，index.wxml 中添加HTML标签；
在index.js中添加数据和逻辑，比如事件执行的方法。使用格式：app.userInfo; app.getlist
注意在index.wxml中用{{}}这种方式 可以直接使用index.js中的数据。
在index.js页面中，可以直接使用pages中的数据，如果使用data中的数据的话，就应该使用this.data.list,
6，新建项目之后，文件介绍
1，project.config.json ：基本详情配置 本地配置中勾选 增强编译 使用npm模块 不校验合法域名
2，sitemap.json 支持爬虫，如果有些文件不想被爬虫，可以在此文件中进行设置
7 声明周期
生命周期完全和uni.app一样
例如：onload()页面中最早执行的，onlanch打开页面初始化一次
8,组件
组件名称和uni.app基本一致
文字可以直接写，可以不用text标签
用block来代替tepmlate标签，不作为渲染标签，兹作为条件标签；
9，wx:if
wx:if wx:elif wx:else 条件显示和隐藏…在uni.app 中不使用v-show
10,wx:for
wx:for 循环遍历数组。 默认元素是item，默认下标是index …
修改元素的默认值和下标
wx:for-item=“item1” wx:for-index=“ind”
{{item,index}}
{{item1,ind}}
11,事件
在index.wxml页面中
在index.js页面中 不用写在methods中，直接写在pages中，goto(){console.log(111)}
12,在事件中不能直接传参
在index.wxml页面中：
在index.js页面中：goto(e){ console.log(e)} //这样会打印出很多的结果，e.currentTarget.dataset 中会找到定义的name属性，属性值为当前的index
data-name="{{index}}" 意思是：data- 将所有的数据放到dataset中，name是属性名，index是属性值
13,双向绑定
在avatar.js中data中定义count:12;
在avatar.wxml中，
在小程序中不支持css预编译，但是可以用插件
小程序请求时安全的，请求必须是HTTPS；socket必须是wss；
小程序支持20M，单包支持2M，小程序有分包的概念
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
