微信小程序开发基础（上）

查看官方文档：developers.weixin.qq.com/miniprogram…

前言：

微信小程序开入入门，如果你有html+css+javascript的基础，那么你就很快地上手掌握的。下面提供微信小程序官方地址：developers.weixin.qq.com/miniprogram…

概述

小程序是不需要安装的，可以立即使用，实现了“触手可及”的梦想，以及“用完即走”的理念，用户不用担心安装太多应用导致内存不足的问题，小程序无处不在。

小程序的好处

开发准备

1. 注册小程序账号
2. 激活邮箱
3. 信息登记
4. 登录小程序后台
5. 完善信息
6. 绑定开发者

小程序的结构

Pages具备属性

tabBar
networkTimeout
debug
navigationStyle
navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
onReachBottomDistance
enablePullDownRefresh

page具备属性

navigationBarBackgroundColor
navigationBarTextStyle
navigationBarTitleText
backgroundColor
backgroundTextStyle
onReachBottomDistance
enablePullDownRefresh
disableScroll

微信小程序完整的开发框架，api等

基本构成

wxml
wxss
wxs
javascript

wxml

模板引用：1. import ；2. include

案例

// index.wxml
<import src="a.wxml"></import>
<template is="a"></template>
// a.wxml
<view>hello</view>
<template name="a">
 hello,hello
</template>
// 结果
hello,hllo

// index.wxml
<import src="a.wxml"></import>
<template is="a></template>

// a.wxml
<import src="c.wxml">
<template name="a">
 this is a.wxml
</template>
<tempalate is="b"></template>

// b.xml
<template name="b">
 this is b.wxml
</template>

// 结果
 this is a.wxml

// index.wxml
<include src="a.wxml"/>
<template is="a"></template>

// a.wxml
<template name="a">
 <view>
  this is a.wxml
 </view>
</template>
<view>hello</view>
// 结果
hello

wxss

wxss特殊之样式

// index.wxml
<view class="container">
 hello
</view>

// index.wxss
@import './asssets.wxss';
.container {
 color: red;
}

// assets.wxss
.container {
 border: 1px solid #000;
}

// index.wxml
<view style="">
</view>

wxss目前支持的选择器：

.class 
#id
element
element,element
::after
::before