微信小程序记录

项目目录结构

微信小程序的基本文件构造和项目目录结构说明如下：

.
├── app.js     # 小程序的逻辑文件
├── app.json   # 小程序的配置文件
├── app.wxss   # 全局公共样式文件
├── pages      # 存放小程序的各个页面
│   ├── index  # index页面
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式表
│   └── logs   # logs页面
│       ├── logs.js      # 页面逻辑
│       ├── logs.json    # 页面配置
│       ├── logs.wxml    # 页面结构
│       └── logs.wxss    # 页面样式表
├── project.config.json
└── utils
    └── util.js

wxml 类似于 HTML 文件，用来编写页面的标签和骨架，但里面只能用小程序自己封装的组件；
wxss 类似于 CSS 文件，用来编写页面样式，只是把 css 文件换成了 wxss 文件；
js 文件类似于前端编程中的 JavaScript 文件，用来编写小程序的页面逻辑；
json 文件用来配置页面的样式和行为。

app.json 文件最初的内容如下：

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window":{
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "balack"
    }
}

pages 属性用来设置页面路径，它是一个数组，每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面，都需要对 pages 数组进行修改。

window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色。

页尾部分我们做一个 tab 栏来切换页面，这个属性叫做 tabBar

"tabBar":{
    "color": "#bfc1ab",
    "selectedColor": "#13b11c",
    "backgroundColor": "#1f1f4f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "个人中心"
      },
      {
        "pagePath": "pages/details/details",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "生活指南"
      }
    ]
  }

使用

下面使用 {{company}}、{{position}} 和 {{lesson}} 作为占位符，用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它，只不过我们想沿用 {{motto}} 的做法，让你知道在哪里修改这些数据。没错，就是在 index.js 文件：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
   <!-- <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>  -->
  <view class="ID_Badge">
    <view>
      <text class="ID_info">{{company}}</text>
    </view>
    <view>
      <text class='ID_info'>{{position}}</text>
    </view>
    <view>
      <text class='ID_info'>{{lesson}}</text>
    </view>
  </view>
</view>

Page({
  data: {
    motto: 'Hello World',
    company: "GoZeroWaste",
    lesson: "21天零垃圾生活指南",
    position: "垃圾魔法师",
    /* ... */
  },

wxml 文件中<view> 组件类似于网页开发中的 <div>，而 <text> 组件是用来写文本的，
需要注意的是 <text/> 组件内只支持 <text/> 嵌套。当然，可用用 <image> 插入图片，
图片要保存到 image 目录，否则在测试的时候是无法上传的。

 <view>
          <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg'></image>
        </view>

mode=‘widthFix’ 表示以宽度不变，高度自动变化，保持原图宽高比不变的方式进行缩放以适应屏幕大小。

使用列表渲染（wx:for）的方法将这些数据绑定一个数组，并在页面上重复渲染。

  <view>
    <view wx:for="{{list}}" wx:key="id" >
      <view class="lesson" id="{{item.id}}">
        <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
        <view class="lessonName">{{item.name}}</view>
        <view class="lessonIntroduce">{{item.introduce}}</view>
      </view>
    </view>
  </view>

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

绑定事件

<view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>确定</view>

在组件中绑定一个事件处理函数 bindtap，点击该组件的时候，小程序会在该页面对应的 js文件中的Page 中找到相应的事件处理函数。

      powerDrawer: function (e) {
      }

<view>
    <text catchtap="click" class="window">Hello</text>
</view>

catch 代表非冒泡事件
tap 代表点击事件
所以连在一起就是非冒泡点击事件
click 其实只是个方法名字

每个页面生命周期：

index.js文件：

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

更新界面数据

这里有个问题 我们更换完值 但是在wxml中不会立即生效
所以我们需要调用 this.setData() 方法将值同步给wxml 让它立即生效