微信小程序初级篇-01

微信小程序

• 什么是微信小程序
  微信小程序（weixinxiaochengxu），简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

• 什么产品可以使用小程序
  由于小程序不需要下载，占用内存小，用户体验优秀，一些使用频率低的应用可以使用小程序。

• 微信小程序的开发准备
  1.微信小程序开发API介绍文档链接
  微信小程序开发API
  2.微信注册账号（个人账号就可以开发）
  3.小程序开发工具
  开发工具下载地址以及介绍

建一个项目

扫码登陆

新建一个项目有两个注意的点：

• 路径不能有中文
  我一开始路径含有中文，项目新建后发现文件夹中没有项目。

• 可以选择无APPID来建一个项目

初始项目，选择手机Nexus 5x

三个全局文件

• app.js
  程序启动时执行的文件
• app.json
  规定了显示的页面（.wxml 文件，类似于html），按照循序来显示，以及标题栏的样式等，如果别的页面没有定义json则用此文件
• app.wxss
  页面布局样式，如果别的页面没有定义wxss则用此文件

组件的使用

• 组件介绍文档链接
  组件介绍

• 按钮的使用示例
  1.添加按钮

<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="btnClick">button</button>

2.设置按钮绑定事件
用到了条件渲染wx:if

<view  bindtap="bindViewTap" class="userinfo" wx:if="{{Show}}">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    btnText : '按钮',
    Show : true
  },
    btnClick:function() {
        this.setData({Show:!this.date.Show})
  },

响应：
如果已经显示头像信息，则隐藏；如果隐藏头像信息，则显示

• 数据绑定
  {{}}来得到数据

  data: {
    motto: 'Hello World',
    userInfo: {},
    btnText : '按钮'
  },

<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="btnClick">{{btnText}}
</button>

框架的使用

• 文档链接
  框架的使用

• 列表的渲染示例

  <view  bindtap="bindViewTap" class="userinfo" wx:if="{{Show}}">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <view wx:for="{{[1,2,3]}}">
      <text class="userinfo-nickname">{{userInfo.nickName}}{{index}}</text>      
    </view>
  </view>

• 公用一个文件

include标签，包含文件夹template里的tmp.wxml文件

<include src="../template/tmp" />

import标签，导入文件的一个模板
模板文件：

<template name="name">lxf</template>
<template name="password">123</template>

引用文件：

  <view  bindtap="bindViewTap" class="userinfo" wx:if="{{Show}}">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover">
    </image>
    <text class="userinfo-nickname">{{userInfo.nickName}}{{index}}</text>
    <import src="../template/temp" />
    <template is="name"></template>
 </view>

作者：林潇霏
原文链接:微信小程序初级篇-01