微信小程序开发----认识篇

1.认识小程序-目录结构

小程序文件类型

小程序主要提供了 4 种文件类型：

 文件作用

 

页面的构成

一个完整的小程序页面需要包括 4 个类型的文件：

• .wxml 定义页面的结构，类似于 .html
• .wxss 定义页面的样式，类似于 .css
• .js 定义页面的逻辑，监听事件、发起请求等
• .json 定义页面的配置，如页面标题等

页面结构： (两个新标签 view, text)

• view 定义块级区域，相当于网页中的 div 标签
• text 定义行内区域，相当于网页中的 span标签

页面样式

• 类选择器，与网页中一致
• 标签选择器，与网页中一致
• 大部分的 css 样式都可以用到小程序中
  
   

列如：

 

wxml:
<view class="navs">
  <text class="active">精选</text>
  <text>手机</text>
  <text>食品</text>
  <text>内衣</text>
  <text>生鲜</text>
  <text>母婴</text>
</view>

wxss:

.navs {
  display: flex;
  justify-content: space-evenly;
  height: 44px;
  padding: 0 10px;
  border-top: 1px solid #eee;
  line-height: 44px;
}

.navs text {
  width: 50px;
  text-align: center;
  color: #333;
}

.navs .active {
  position: relative;
  top: 2px;
  color: #f5a11c;
  font-size: 18px;
}

.navs .active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translate(-50%);
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background-color: #f5a11c;
}

 2.认识小程序-逻辑处理

注意点：每个页面都必须要调用 Page 函数来注册页面，且要传入对象类型的参数

要点：

• data 初始化页面中的数据

示例：在.js结尾的文件

Page({
 data:{
  msg:'微信小程序'
 }
})

 

• this.setData 更新数据
   

  Page({
    // 定义数据
    data: {
      msg: '小程序'
    },
    update() {
      // 修改数据并更新视图
      this.setData({
        msg: '开发'
      })
    }
  })

• { {  }} 插值语法可以实现数据的渲染

 

 

 bind:事件类型=事件回调

配置文件简介

小程序配置文件是一种json格式的文件。可以起到快速新建页面、设定小程序首页、设置窗口样式及设置导航栏和底部tabBar等作用。