小程序教程1

微信小程序开发教程

1. 简介
   它是一个基于微信提供的一个过桥工具实现不少h5在公众号很难实现的功能，有点相似于hybrid开发，不一样于hybrid开发的方式是：微信开放的接口更为严谨，结构必须采用他提供给咱们的组件，外部的框架和插件都不能在这里使用，让开发者彻底脱离操做DOM，开发思想转变很大，理解他的核心功能很是重要，接下来一些列教程将会逐渐介绍小程序。

2. 环境搭建
   • 下载demo代码
   • 获取微信小程序的 AppID,这个我的身份是不能申请的，因此这步跳过
   • 下载开发工具，点击这里,登录须要扫描二维码
   • 工具打开以后，选择新建项目
     • APPID因为没有，因此不填写，选择无APPID
     • 项目名称随意
     • 项目地址就是把最开始下载的demo解压以后的路径（刚开始只是作案例，之后目录随意定）
3. 代码结构分析
   • 点击左侧导航的编辑，咱们能够看到这个项目中初始化的文件，其中最关键的是 app.js、app.json、app.wxss 这三个文件，.js文件是脚本文件，.json文件是配置文件，.wxss是样式文件，小程序会读取这些文件而且声称小程序实例
   • app.js文件是小程序的脚本文件，在这个文件中监听和处理小程序的声明周期函数，声明全局变量，调用MINA通信框架提供的API，
   • app.json是整个小程序的全局配置，咱们在这个文件中配置小程序由哪些文件组成，配置小程序的窗口背景色，导航条样式，默认标题等（该文件不可添加任何注释）
   • app.wxss是整个小程序的公共样式文件，在组件中能够直接使用在app.wxss中定义的样式规则
   • pages目录专门放咱们的页面文件，微信小程序中的每个页面的路径（路径+页面名）都须要些在app.json中的pages中，而且pages中的第一个就是小程序首页。
   • pages文件夹下的每一个页面组件都是一个文件夹，该文件夹下由.js,.wxml,.json,.wxss四个文件组成，.js文件是脚本文件，.json文件是配置文件，.wxml文件是页面结构文件，.wxss文件页面的样式文件
   • 页面的样式和配置文件都不是必须的，当你添加了这两个文件的话会覆盖app.wxss和app.json，不添加的话会使用这两个全局文件的样式和配置
4. 生命周期
   • 它的生命周期是App Launch-->App Show-->onload-->onShow-->onReady
   • 首先是整个app的启动与显示，app的启动在app.js里面能够配置，其次再进入到各个页面加载显示（后面会详细介绍声明周期）

5. 路由

   微信对路由的介绍不多，只提供了三个方法，已经基本够用了，开发者能够不用像其余框架那样繁琐的去配置路由了

   • wx.navigateTo(object)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack能够返回到原页面。
   • wx.redirectTo(object)：关闭当前页面，跳转到应用内的某个页面。
   • wx.navigateBack()：关闭当前页面，回退前一页面。

6. 组件

   微信在组件方面也是提供的很是全面，基本上知足项目开发需求，因此开发速度应该会很快，开发以前须要认真的看几遍，开发速度会很高

7. 其余
   • 任何的外部框架都没法使用，就算是原生的js插件也很难使用，主要是因为微信小程序这次的架构不容许操做DOM
   • 这次微信提供了webSocket，能够直接用它作聊天，能够开发的空间很是大
   • wxss样式文件能够直接在里面写样式，也能够采用引入的方式,公共样式能够在app.wxss中引入

   @import "wxss/index.css";
       body {
           background:'#f00';
       }

   • 写配置项的时候不管键值都要用双引号包裹，不然会编译错误