用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

NOW直播和微信小程序那些事

天下雪 2017-5-11 00:17

作者:yangkevin,来自原文地址微信小程序从发布开始,可谓赚足了眼球,一度引发了开发界“全民学JavaScript”的梗。为了跟上时代步伐,我们NOW直播团队也在发布后第一时间尝鲜,本文就来扒一扒这几天试水小程序开发 ...

作者:yangkevin,来自原文地址 

微信小程序从发布开始,可谓赚足了眼球,一度引发了开发界“全民学JavaScript”的梗。

为了跟上时代步伐,我们NOW直播团队也在发布后第一时间尝鲜,本文就来扒一扒这几天试水小程序开发的那些事。

入门

准备工作

想要开发微信小程序,首先必须要有一个微信公众平台小程序的帐号(目前帐号只有内测邀请唯一途径),此帐号用于获取app id、secret id、添加开发者等管理后台操作。

然后你需要下载官方提供的微信web开发者工具,这是一个集成了编码、调试、预览、发布功能的一个IDE。

编码功能:

调试功能,集成了chrome开发者工具,可以实现样式预览、JS断点调试等:

发布、预览功能,可以在此上传你的程序,预览生成二维码,提供在手机微信上预览小程序的功能;另外,开发者工具还集成了ES6编译、代码压缩等基础代码构建功能:

开发入门

对于哪怕是只有一点点web前端经验的开发者来说,微信小程序的入门门槛简直是低到不能再低了。

一个小程序的主要文件目录简洁到如下:

├─ app.json 
├─ app.wxss
├─ app.js
└── pages
    ├─ index
    │   ├─ index.wxml
    │   ├─ index.wxss
    │   └─ index.js
    └─ my-page
        ├─ my-page.json
        ├─ my-page.wxml
        ├─ my-page.wxss
        └─ my-page.js

一个小程序大体上分为两大块:

  • 应用实例app

  • 页面pages

应用实例

小程序会读取根目录的app.jsonapp.jsapp.wxss生成程序实例,当然样式文件不是必需的。

程序配置app.json

// app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

在这个文件里可以针对以下内容作小程序的全局配置:

  • 页面文件的路径

  • 网络超时时间

  • 程序级tab配置

  • 窗口颜色

  • 手机导航栏、小程序标题栏的背景色、字体色,下图是设置了导航栏颜色为绿色的效果:

  • 下拉刷新行为(禁用下拉、下拉文字、图标、颜色),下图是典型的下拉刷新效果:

逻辑脚本app.js

每一个小程序都是通过App({/*configs*/})这样一个App方法来注册的,在其具体的配置中,我们可以监听并处理程序级的生命周期函数、声明全局变量。比如,需要设置程序启动、显示时的一些操作,设置一些程序全局的数据、变量、方法,都可以在这里完成。

//app.js
App({
  onLaunch: function () {
    // do something
  },
  global: {
    data: null
  }
})

app.js里声明的属性及方法,都可以在小程序的任意页面里访问到:

// page.js

//获取应用实例
var app = getApp()
Page({
  doSth: function() {
    console.log(app.globalData);
  }
})

app.js里支持的的程序级的生命周期回调包括:

  • onLaunch 小程序初始化完成时触发

  • onShow 启动,从后台进入前台显示时触发

  • onHide 从前台进入后台时触发

页面

一个页面简单讲可以理解成小程序的一个完整界面单元,每一次完整的界面切换就是page之间的跳转,下图演示一个典型的页面切换、回退过程:

一个页面的组成部分包括:

  • 视图层

    • WXML(WeiXin Markup language) 用于描述页面的结构

    • WXSS(WeiXin Style Sheet) 用于描述页面的样式,非必需

  • 逻辑层

    • JS 控制页面行为及数据变化

    • JSON 页面级配置,非必需

视图层与逻辑层的关系:数据驱动 + 事件绑定

视图层与逻辑层统一通过数据事件相互联系起来,用一句话描述就是:数据驱动。

如果你有使用过React、Vue(或其他MVVM框架)等,对于“数据驱动”肯定一点都不陌生了,没错,小程序毫无疑问吸收了这一开发理念。

来看看一个简单页面的代码:

<!--index.wxml-->

<view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
  <text class="userinfo-nickname">
    {{userInfo.nickName}}
  </text>
</view>
//index.js

Page({
  data: {
    userInfo: {
        nickName: 'test',
        avatarUrl:  
                 
                邀请 
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏

相关阅读