微信小程序入门个人笔记(1)

app.json全局配置文件
“pages”:控制页面路由,接收一个数组,数组是页面路径,如果路径文件不存在,则会自动创建
“window”:控制页面窗口信息,
background前缀的控制背景;
navigationBar前缀控制顶部导航条

页面文件夹中的page局部配置
特点:当page配置的属性和全局app.json相同时,会优先使用局部配置

数据绑定语法
也可以用三元表达式等

<view>{{变量值}}</view>

循环语法

wx:for="{{数组名}}"

默认值为item,默认所以为index
修改默认值用

wx:for-item='自定义变量名

修改索引用

wx:for-index='自定义索引名'

与vue一样循环遍历需要绑定唯一值

wx:key="字符串"

(也可以保留关键字–*this,*this代表在for循环中的item本身)

block是一个空标签,可以用来写循环标签,或者判断标签,不会出现在页面上

<view>

<block wx:for="{{students}}" wx:key="*this">

表示对象的属性值：{{item}}

    表示对象的key值：{{index}}

</block>

</view>

判断语法
wx:if=“条件一”
wx:elif=“条件二”
wx:else

hidden 用作隐藏,与if不同的是hidden为隐藏内容,而if则会销毁该内容
类似于vue中的v-show,不同点是判断条件为true则内容隐藏

事件处理
关键字:bind事件名=‘函数名’
如果需要传递参数,则需要在该标签中自定义参数传参 data-参数名
取值需要在函数中传参获取 handle(e){e.currentTarget.dataset.参数名}

绑定输入事件
1.通过输入事件获取输入内容
wxml中监听输入框信息

<input bindinput="方法函数名" type="text" />

js中定义方法函数

函数方法名(e){

e.detail.value

}

2.通过简单双向绑定获取输入内容
wxml中使用

<view>

  用户名：<input type="text"  model:value="{{userName}}"/>

  <button bindtap="getUserName">获取用户名</button>

</view>

js中

data{

userName:''

},

getUserName(){

console.log(this.data.userName)

}

通过实践函数赋值给data并渲染页面
1.定义函数
2.通过this.setData({‘被赋值参数’ :‘值’})
如:

//wxml文件中

<view>
<button bindtap="getName">点我显示名字</button>
</view>
<view>
{{name}}
</view>

//JS文件中
data:{
name:''
}

getName:()=>{
this.setData(name : '小明')
}

WXSS
兼容css大多数特征,并在css基础上进行拓展
1.响应式单位rpx
把全屏幕宽度定位rpx,类似于rem

2.样式导入
使用@import导入外联样式表,后跟相对路径,用;表示语句结束
例如在同目录下有common.wxss样式表
在页面文件夹下的wxss文件中

@import"common.wxss";

图片组件 image

<image src="相对路径"></image>

mode:图片显示的方式
最常用属性:
widthFix
–设定好图片的width,height会自适应,图片会全显示
如果不设置,则默认的宽高比例是 320 * 240