微信小程序入门教程

1.介绍微信小程序
依赖环境(宿主环境): 手机微信

2.开发前的准备
注册开发者账号–>AppID
安装微信开发者工具

3.一个项目的组成部分
pages 文件夹,在这个文件夹之下存放小程序中所有的页面,建议一个页面用一个文件夹进行维护
app.js 小程序的入口文件
app.json 项目配置文件
pages: 进行页面的注册, 如何创建一个新的页面? 如何把页面变为小程序的首页?

window: 对所有的页面进行窗口样式的配置

	tabBar: 进行tabBar页面的配置
app.wxss:全局的样式文件
project.config.json: 项目配置文件
	对 微信开发者工具 进行的配置,如:
		appid,es6转es5
		本地设置中的各个选项

4.一个页面的组成部分
页面的布局 --> .wxml 页面的样式 --> .wxss 页面的样式和全局样式如果都配置了的话, 那么是以权重为准 页面的功能 --> .js 页面的配置 --> .json

5.几个配置文件
app.json
project.config.json
sitemap.json
页面.json
页面的配置针对的是app.json配置中的window节点,所以页面的配置不需要显式写window节点

6.运行机制
一个小程序的实例对象中可能会有多个页面
一个页面中可能会有多个组件
App() --> Page() --> Component()

7.常见的原生组件的使用
1.view：
最常用的容器组件,就相当于以前的div；
2.scroll-view：
滚动的组件, 注意:页面的滚动和容器的滚动不是同一个概念；
如果想让一个容器内部产生滚动:
父元素需要有一个固定的高度
子元素需要超过父元素的高度
给父元素设置scroll-y的属性(相当于以前我们给父元素设置的overflow:scroll/auto)
3.swiper swiper-item：
轮播图相关：
text
selectable指明文字可以被选中
rich-text
通过nodes属性可以显示html的结构,注意:小程序默认是识别不了html标签的,当我们从服务器获取的数据就是html字符串时,如商品详情数据,文章详情数据等, 就需要使用rich-text组件
button
type
size
plain
image
注意:它不是 img
src指明图片的路径
mode: 原则是不能让图片变形
navigator
相当于以前的a标签
url指明跳转页面的路径, 需要以/开头
8.小程序中的协同开发
角色:管理者,开发者,运营者,体验者
版本:开发版本,体验版本,审核版本,上线版本