微信小程序

发表于 | 分类于 | | 阅读次数:
微信小程序。

前言：

由于微信小程序目前处于内侧阶段,因此Demo是在无AppId情况下创建的。Dome链接

开发环境：

微信web开发者工具 最新版本 2017.05.19 （0.17.171900）
下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
官方文档:http://wxopen.bcoder.cn/index.htm

创建项目：

开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在「编辑」里可以查看和编辑我们的代码，在「调试」里可以测试代码并模拟小程序在微信客户端效果.

初始化小程序：

app.js - 小程序的脚本代码,声明全局变量

1
2
3
4
5
6
7
8
9
10
11
12
App({
  onLaunch: function() { 
        // Do something initial when launch.
    },
    onShow: function() {
        // Do something when show.
    },
    onHide: function() {
        // Do something when hide.
    },
    globalData: 'I am global data'
})

app.json - 小程序的全局配置,配置小程序的窗口背景色，配置导航条样式，配置默认标题

1
2
3
4
5
6
7
8
"window":{
    "backgroundTextStyle":"light",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "Small App",
    "navigationBarBackgroundColor": "#000000",
    "backgroundColor": "#fbf9fe",
    "enablePullDownRefresh": true
  }

app.wxss - 小程序的公共样式表

1
2
3
4
5
6
7
8
9
/**app.wxss**/
@import "./style/layout.wxss"; `通过import引入其他样式表`
    .container {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    }

目录结构：

  • style — 存放独立wxss文件，可import引入
  • image — 存放项目图片
  • pages — 存放项目页面相关文件
  • utils — 存放utils文件(通过module.exports对外暴露接口)，可require引入

创建页面：

微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成

index.js 

1
2
3
4
5
Page({
    data: {
    motto: 'Hello World'
    }
})

index.wxml - 页面结构文件

1
<text class="user-motto">{{motto}}</text>

index.wxss

1
页面的样式表中的样式规则权重大于app.wxss

index.json

1
页面的配置文件.json会覆盖app.json 的 window 中相同的配置项

框架：

  • 逻辑层
    • 注册程序
      • 通过全局函数getApp()可以获取全局的应用实例，如果需要全局的数据可以在App()中设置
    • 注册页面
    • 模块化
      • 我们可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过module.exports才能对外暴露接口。
    • API
    • 路由
      • wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面,一个应用同时只能打开5个页面
      • wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面
      • wx.navigateBack()：关闭当前页面，回退前一页面
  • 视图层
    • 条件渲染
    • 列表渲染
    • 模板
    • 事件
    • 引用