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

一、初识

1、微信小程序介绍

　　微信小程序自2017年1月9正式上线以来就引起广泛关注。微信之父张小龙说：“小程序是一种不需要下载安装就可以使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。这也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装下载”

2、注册小程序账号

https://mp.weixin.qq.com/

3、查看小程序AppID

　　开发--开发设置--AppID

4、设置小程序信息

　　首页/设置--填写信息

5、下载并安装小程序开发者工具

6、建立第一个微信小程序

　　设计一个小程序，小程序运行后在界面上显示一句话“Hello Wechat”

　　　　创建/打开微信小程序

　　　　编写小程序代码

　　　　编译小程序

　　　　运行微信小程序，包括模拟器运行和真机运行

　　　   微信小程序页面由.js、.json、.wxml、.wxss文件构成。.js是页面逻辑文件，里面主要是一些逻辑代码；.json是页面配置文件；.wxml是页面描述（/内容）文件，类似html；.wxss是样式表（/内容样式）文件，用来渲染页面，类似css。

二、字体样式设置

view组件支持使用style、class属性来设置组件的样式。

1、利用style设置字体样式

　　利用style可直接在wxml文件中设置

2、利用class设置字体样式&&index.wxss定义样式类的方法

利用class需要先在wxss文件中定义样式类。静态样式一般使用class设置，动态样式一般使用style设置，这样可以提高渲染速度。

 样式前面要加点，这叫选择器，只是通过class来引用的要加

 index.wxss里做完样式的定义以后，index.wxml要做引用

3、利用class设置字体样式&&app.wxss定义样式类的方法

index.wxss里设置的样式，主要可以通过index.wxml来引用；app.wxss里设置的样式，可以在整个小程序的其他页面来进行引用，

在app.wxss中定义的样式类属于全局样式类，可以在项目的任何文件中使用；在index.wxss中定义的样式类一般只在index.wxml中使用。

 4、常用字体样式属性

三、文本样式设置

1、利用class属性进行文本样式的设置

2、文本样式属性

四：图片与声音

1、<image></image>图片组件

image组件，支持JPG、PNG、SVG格式，用src属性指定图片的路径

设置图片源 

可以直接输入图片路径，也可以对它进行绑定，js文件里进行传递数据，js里面去赋值，相当于一个变量，imgSrc通过index.js文件中的data进行赋值，

把路径渲染到视图层的{{imgSrc}}

2、音频的创建和使用

绑定事件

　　点击图片，引发叫声，绑定点击图片的事件，这个事件相当于定义一个函数，实现点击组件的事件

绑定事件的函数在js里面编写

　　首先要利用API函数wx.createInnerAudioContext()创建音频上下文，然后设置该上下文的src属性，并利用play()函数播放音频。

创建音频上下文，也就是音频的环境变量，叫audio  

给源赋值，这个音频对应的哪个音频文件