辉太郎看前端(初识小程序-文件配置)

前言

1. 文件配置
2. 创建页面
3. 组件
4. 语句

配置

• 每个页面分为四个部分

1. .wxml负责页面结构
2. .wxss负责页面样式
3. .json负责页面配置
4. .js负责页面功能或逻辑
   
   注： 以上是单个页面的配置文件。
5. 在文件内有app.js，app.json和app.wxss三个文件。

• app.js负责一些公共功能。
• app.json负责整体配置。
• app.wxss负责公共的样式。
  

6. 在utils中存放了我们要用的一些公共的方法，比如日期格式化 判断手机号码是否正确 判断某个权限是否授权等等，在需要的地方调用一下。
   

创建页面

在app.json中的pages中我们可以配置页面，按照下图配置写，会自动生成我们需要的四个文件

组件

1. view组件相当于我们在html5中的div，他呢？就是一个容器。
2. text组件相当于我们在html5中的span，可以在一行显示的文本标签。
3. input组件的写法和我们在html5中的写法基本一致，不过在微信小程序中，它是一个块级组件，独占一行。
   其余请参考： https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

语句

语句我用一个小案例给大家介绍一下吧！(点击按钮获取input内容并渲染到页面)

1. 页面

  <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的一半，并带有自适应窗口大小。

总结

初学者，请多多指教。