最近在学习小程序开发,这是查看微信公众号官网,自己总结的一篇小程序开发文档,如果有不对的,欢迎大家指出,让我们共同进步。
开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。
跟随这个教程,开始你的小程序之旅吧!
下面直接介绍小程序内容:
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" />
欢迎大家关注“码农新锐”。