微信小程序开发入门篇（一）

 

最近在学习小程序开发，这是查看微信公众号官网，自己总结的一篇小程序开发文档，如果有不对的，欢迎大家指出，让我们共同进步。

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。

跟随这个教程，开始你的小程序之旅吧！

下面直接介绍小程序内容：

 

WXML 介绍

 

Html模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

WXML 模板介绍

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image 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>

和HTML非常相似，WXML由标签、属性等等构成。但是也有很多不一样的地方我们一一阐述一下：

1、标签名称不同

Html常用标签div、p、span等。

WXNL常用标签view、button、text等，这些标签就是小程序给开发者包装好的基本能力，小程序还提供了地图、视频、音频等等组件能力。

2、多了一些 wx:if 这样的属性，以及获取服务端属性 {{ }}表达式。

小程序运用MVVM 的开发模式（例如 React, Vue），把渲染和逻辑分离，简单说不在让JS直接操控DOM,JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

用以下一些简单的例子来看看 WXML 具有什么能力：

1）数据绑定

wxml页面：

<!--wxml-->
<view> {{message}} </view>

js页面： 

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2）列表渲染

wxml页面：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

 js页面： 

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

3）条件渲染（使用wx:if、wx:elif、wx:else条件判断）

wxml页面：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

js页面： 

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

判断是区分大小写的，view只等于MINA不等于mina

4) 模板

非使用模板：

<text wx:for="{{staffA}}" wx:for-item="item">

    <text>{{item}}</text>

</text>

使用模板:

wxml页面：

<template name="staffName">

<view>

FirstName: {{firstName}}, LastName: {{lastName}}

</view>

</template>

<template is="staffName" data="{{...staffA}}"></template>

<template is="staffName" data="{{...staffB}}"></template>

<template is="staffName" data="{{...staffC}}"></template>

 js页面:

Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

template模板使用name名称和下面的template的is一定要相同。

5) 事件

wxml页面：

<view bindtap="add"> {{count}} </view>

js页面：

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

微信官网事件介绍

WXSS 样式介绍

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

引用css有两种方式：

1.第一种方式，通过import引入，在wxss文件引入另一个wxss文件。

.usermotto {

margin-top: 200px;

}

@import "common.wxss";

2.第二种方式。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

欢迎大家关注“码农新锐”。