前言
- 文件配置
- 创建页面
- 组件
- 语句
配置
- 每个页面分为四个部分
.wxml
负责页面结构.wxss
负责页面样式.json
负责页面配置.js
负责页面功能或逻辑
注: 以上是单个页面的配置文件。- 在文件内有
app.js
,app.json
和app.wxss
三个文件。
app.js
负责一些公共功能。app.json
负责整体配置。app.wxss
负责公共的样式。
- 在
utils
中存放了我们要用的一些公共的方法,比如日期格式化 判断手机号码是否正确 判断某个权限是否授权等等,在需要的地方调用一下。
创建页面
在app.json
中的pages
中我们可以配置页面,按照下图配置写,会自动生成我们需要的四个文件
组件
view
组件相当于我们在html5
中的div
,他呢?就是一个容器。text
组件相当于我们在html5
中的span
,可以在一行显示的文本标签。input
组件的写法和我们在html5
中的写法基本一致,不过在微信小程序中,它是一个块级组件,独占一行。
其余请参考: https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
语句
语句我用一个小案例给大家介绍一下吧!(点击按钮获取input内容并渲染到页面
)
- 页面
<view class="input_box">
<!-- 输入框 -->
<input class="weui-input" maxlength="10" placeholder="最大输入长度为10" value="{{txt}}" bindblur="inp"/>
<!-- 添加按钮 -->
<button class="mini-btn" type="warn" size="mini" bindtap="add">添加</button>
</view>
<!-- 对应的每条数据 -->
<view class="li" wx:for="{{list}}" wx:key="index">
<text>{{item}}</text>
<button class="mini-btn" type="warn" size="mini" data-index="{{index}}" bindtap="del">删除</button>
</view>
</view>
注: 在进行删除操作时要在按钮组件中定义data-index="{{index}}"
(index为循环时的下标),在方法中打印出event
找到下标删除。
2. 逻辑语句,都在js
文件中操作
data: {
txt:"",
list:[]
},
// 获取到输入框中的内容
inp(e){
this.setData({
txt:e.detail.value
})
},
// 添加到数组中
add(){
// 数组赋值给一个新对象
let li =this.data.list
// 添加input内容
li.push(this.data.txt)
// 设置数组内容
this.setData({
list:li,
txt:"" //清空input框
})
},
//删除事件
del(e){
// console.log(e.currentTarget.dataset.index)
//数组赋值给一个新的变量
let arr=this.data.list
//变量操作删除
arr.splice(e.currentTarget.dataset.index,1)
//重新赋值给list数组
this.setData({
list:arr
})
},
注: 在操作数据时,要通过this.setData({})
来实现,和我们在vue中操作数据是有差别的。
3. 样式
.box{
padding: 0rpx 10rpx;
width: 100%;
}
.input_box{
display: flex;
justify-content: space-between;
}
.weui-input{
width: 80%;
height: 100rpx;
border: 1rpx solid #ddd;
}
.mini-btn{
height: 100rpx;
line-height: 100rpx !important;
}
.li{
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10rpx;
}
text{
width: 70%;
}
.li>button{
width: 10%;
}
注: 根据上边的样式可见,和html5
的样式是差不多的,出现的新单位rpx
相当于px
的一半,并带有自适应窗口大小。
总结
初学者,请多多指教。