小程序教程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';
    }
    • 写配置项的时候无论键值都要用双引号包裹，否则会编译错误
posted @ 2017-02-07 15:05  叫我MrGuang  阅读(283)  评论(0)  编辑  收藏  举报