微信小程序简单介绍 一

一 组件及api网址：

组件 ：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

api：https://developers.weixin.qq.com/miniprogram/dev/api/

二 简单步骤

第一个微信小程序

• 右键 ->新增目录 -> firstPage
• 右键 ->新建js -> 输入Page ->自动生成Page内容

• 修改根目录下app.json内容将first.js内容加进来

•  在first.wxml中随便输入内容会显示在调试界面当中

三 内容详解

3.1 first.wxml 内容

该文件是布局文件 可以随便加入一个组件看看

 <!--pages/firstPage/first.wxml-->
 <view class="btn-area">
   <view class="body-view">
     <text>{{text}}</text>
     <button bindtap="add">{{btn1name}}</button>
     <button bindtap="remove">{{btn2name}}</button>
   </view>
 </view>

其中第四行的 {{text}} 中的text需要在 first.js中定义 如下

3.1.1 按钮添加点击事件

wxml文件中

 <button bindtap="remove" bindtap='btnClick'>{{btn2name}}</button>

js文件中 文件最后添加方法函数 函数名为 bindtap的内容

  btnClick:function(){
    console.log("按钮被点击了");
  }

点击按钮就会打印所写的内容

 3.1.2 this.setData方法

如果要修改text的内容可以 通过 this.setData方法

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text:"你好,微信小程序...",
    btn1name:"my add line",
    btn2name:"my remove line"
  },

  ...
  btnClick:function(){
    console.log("按钮被点击了");
    this.setData({ text: "hello ,weixin..." });
    this.setData({ btn1name: "添加一行." });
    this.setData({ btn2name: "删除一行." });
  }
})

3.1.3 wx:if="{{条件判断语句}}"

if条件判断

.wxml 中添加

<view wx:if="{{show}}">如果为show为true则显示该内容。</view>

<view wx:else>如果为show为false则显示该内容。</view>

.js中给show赋值

data: {
    text:"你好,微信小程序...",
    btn1name:"my add line",
    btn2name:"my remove line",
    show:true
  },

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

for循环

wxml 文件中

<view wx:for="{{arrays}}">

{{index}} - {{item}}

</view>

js文件的data中

 data: {
    text:"你好,微信小程序...",
    btn1name:"my add line",
    btn2name:"my remove line",
    show:false,
    arrays:["aaa","bbb","ccc"]
  },

修改item 跟 index的名称 效果是一样的

<view wx:for="{{arrays}}" wx:for-item="it" wx:for-index="ix">

{{ix}} - {{it}}

</view>

3.1.5  newArrays.shift(); 删除数组中第一个元素

    var newArrays = this.data.arrays;
    newArrays.shift();
    this.setData({ arrays:newArrays});

点击按钮会执行删除arrays中的第一个元素

3.1.6 include 和import方式加载模板

新建目录 templates

• include方法加载

在 templates中新建header.wxml文件 内容为

<text>
头部内容
</text>

在frist.wxml中加载模块

<include src="../templates/header" />

• import方法

在templates目录下新建 bottom.wxml文件 内容为

<template name="bottom1">

底部内容1 -{{content}}

</template>

<template name="bottom2">

底部内容2 -{{content}}

</template>

在first.wxml中加载模块

<import src="../templates/bottom" />

<template is="bottom2" data="{{content:'显示底部内容'}}"/>

4 事件绑定

bindTab绑定

catchTab绑定