文档章节

【微信小程序开发•系列文章一】入门

jsongo0
 jsongo0
发布于 2016/10/09 13:41
字数 2925
阅读 6834
收藏 45

本系统文章主要有以下几篇:

  1. 《【微信小程序开发•系列文章一】入门》
  2. 《【微信小程序开发•系列文章二】视图层》
  3. 《【微信小程序开发•系列文章三】数据层》
  4. 《【微信小程序开发•系列文章四】模块化》
  5. 《【微信小程序开发•系列文章五】主界面》
  6. 《【微信小程序开发•系列文章六】生命周期和路由》
  7. 《【微信小程序开发•系列文章七】websocket》

微信小程序,简单的开发,却接近app的体验,无需下载,扫码打开,推广成本大大降低,手机上还不用安装太多应用,相信不久后,各家做得好些的app都会开发微信小程序。这是新一轮的竞争的开始。如果你正在学习react native之类的跨平台app开发的话,不妨先花点时间来学习下微信小程序的开发,或许过段时间后,你会想丢掉原来react native之类的想法。

微信小程序的开发,用的主要还是js语言,微信为自己定义了一套框架专门用来做小程序的开发,叫MINA。接下去我们要一起学习的就是这个框架。

先记录几个网址:

  1. 官方简易教程、和API说明
  2. 开发工具的下载地址
  3. 下载完后要破解
  4. 可以参考和学习别人的代码

关于微信小程序的介绍本文就不再多说了,既然读者点进来阅读本文,说明你已经有了一定的兴趣和了解,这里就不占篇幅解释了,贴几个介绍上来有兴趣的读者可以自己看看。
微信小程序是谁的“通往财富自由之路”?
微信小程序,一个有局限的类似 React Native 轮子!
看起来很 Q 的微信小程序,背后藏着什么样的野心?

一、开发工具

1、开发工具其实是用js开发的。(目前版本:v0.10.102800)

很多人可能不知道js还能开发窗口应用。有兴趣的读者可以先了解下Electron,用nodejs写桌面应用,其原理还是类似chrominum浏览器,也就是在外套一层壳,里面是个网页,只不过做了些优化请用户感知不到是个网页,而更像个窗口应用。它提供了非常丰富的操作系统层面的api然后用js来调用并创建桌面应用程序。
这一次开放的这个微信小程序的开发工具,跟之前的公众号开发调试工具一样体验上非常相似,网上也有牛人分析这些工具就是基于Electron开发的。跟之前一样,这个工具也是要扫码登录,玩微信小程序开发的读者,大部分应该之前或多或少做过公众号开发的,至少有一定的js基础,如果没有,倒是建议您学习一下js开发,由于h5的盛行,和nodejs后台服务开发的兴起,及跨平台的移动开发(如react native)的流行等,js已经成为了是个程序员就应该至少掌握一点的语言。

2、下载好工具

如果你手中已经有一个微信小程序的内测资格,或者读者在看这篇文章的时候权限已经放开的话,那么你可以跳过这一段,直接点开上面的工具下载地址下载打开就可以了。上面给出了一个破解方法的地址,读者可以用它来突破微信内测资格的限制。替换相应的文件即可。破解其实不难,因为上面提到过这个工具是用js开发的,js是不用编译就可以运行的语言,所以代码藏不住。怎么查看代码?window用户可以进入程序目录,查看package.nw\app\dist。mac用户可以点开应用程序目录,右击->显示包内容->Contents->Resources->app.nw->app->dist,这里就是工具的源代码。做过react + flux开发的读者一眼看到这目录结构,可能会觉得很熟悉(actions, components, dispatcher, stores...),没错,它就是用react + flux架构开发的,具体的结构本篇文章暂不讨论,笔者正在准备一篇关于typescript + react + flux的文章,之前做过这方面的开发,对它的开发方式非常推崇。回到本文的主题上来,这篇文章主要是一个入门和准备。读者打开上文提到的破解文件地址后,下载相应的文件替换到相应的目录即可。如果你碰巧也在用mac,那可以直接下载我的版本:https://pan.baidu.com/s/1dEATgkx 直接使用就可以。

二、跑起第一个微信小程序

1、创建项目:
创建项目
点击添加项目,下一步,如果是已经有微信小程序的appId的用户(请用官方提供的原版,不需要用破解版)填入appId,用破解版的用户appId随便填都行。然后写上项目名,再选个目录就可以创建一个demo了。
进入项目后,开发工具会自动编译、运行demo,这时展现在读者眼前的就是第一个hello world程序了。

2、学习源码
打开代码的目录,第一眼看到的就是这三个最关键的文件,app.js、app.json、app.wxss,这些是每个微信小程序必不可少的文件,必须放在项目的根目录。
(1)app.js是整个程序的入口js文件。
App函数是用来注册的,传入参数生成一个主程序,它定义了整个程序相关的一些生命周期,传入json对象作为参数。先来理解一下一个微信小程序的生命周期,主要三种状态,初始化->显示->隐藏->显示->… 后面可以无限循环。当用户点击小程序图标时,会先初始化一些数据,其中onLaunch会在小程序初始化完成时调用,这时还没有page生成。接着程序从无或者从后台进入到前台(用户看得到)的时候,onShow会被触发,如果用户点击左上角关闭,或者按了设备 Home 键离开微信,这里onHide会被触发。后面如果再进入这个小程序,onShow会被再次触发。
App生成的对象是全局的,可以通过
var appInstance = getApp();
来拿到app实例。globalData是App里定义的全局都可以使用的数据对象。App函数在全局只能调用一次,而且必须在app.js中调用。
当onShow被调用后,全局就至少会有一个页面了,这时可以通过var curPage = getCurrentPage();来拿到当前显示在用户眼前的页面。这里要注意一个地方,onLaunch只是数据的初始化,还没有页面生成,所以这个函数里不要去调用getCurrentPage函数。

(2)app.json用来定义全局的一些配置参数

{
  "pages": [ // 定义一些页面的位置,这样程序才能找到这些页面
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",  // 下拉背景字体、loading 图的样式,仅支持 dark/light
    "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
    "navigationBarTitleText": "techzto", // 导航栏标题文字内容
    "navigationBarTextStyle": "black" // 导航栏标题颜色,仅支持 black/white
  }
}

相关的参数及意义,上方已经在注释里说明,更新的配置说明,可以参考微信官方文档的配置详情。在这文档里,参看几个字段和它的含意就行,下方的tabBar之类的,在之后的文章中会详细介绍。

(3)app.wxss则是全局的样式定义
wxss文件就相当于css文件,用来定义一些页面的样式。理解这一点,再来看app.wxss就可以知道,它定义的应该是一些整个app的页面中,共同用到的一些样式。

3、四类文件的说明
一个框架页面由四个文件组成,分别是js、wxml、wxss、json,它们主要分为四层。js主要用来实现程序的逻辑层和数据层,wxml和wxss用来实现程序的view视图层,json就是用来写一些配置信息。它们的关系是,逻辑层处理数据后,返回到视图层显示出来,而视图层的用户操作事件反馈回逻辑层。虽然有这么多文件,但最后程序发布的时候,所有的文件都会被编译成js文件,并合并到同一个js文件里面、压缩。需要注意的是,要跟平时做h5开发区别开发,虽然js语法相通,但像document,window这些浏览器的全局对象是用不了的,这一点要特别注意。但有很多用wx来引用的接口,这些接口目测就是微信从底层暴露出来给微信小程序调用的吧。

4、开发工具的其它说明
上文中已经讲了不少跟这个工具相关的使用,这里再来补充几点工具的介绍吧。
这是一个集成了coding,编译调试运行、简单项目管理的一个工具,可以把它当成一个编辑器来用,网上有人推荐用sublime等外部工具,不过笔者不太建议。不管怎么说,切换来切换去的也怪麻烦,而且微信开发这个工具,要集成coding的功能,自然有它自己的想法,可能是要定义一套比较完整的开发流程,让开发者不用为开发工具烦恼。如下图:
开发工具
左侧有几个tab,第一个,“编辑”就是给开发者管理文件、编写代码的,coding时还会有代码提示,这功能已经足够强大了。如果你之前已经习惯了用gulp、webpack之类的集成工具的话,也没关系,因为这个工具已经帮你做好这些事情了。你不用去写一堆gulpfile等的配置文件,这工具已经有一个集成化的功能,点击编译就可以完成所有的编译操作,可能你会说,没办法watch,这个我也还没找到方法,可能得去改它的源码吧。后面有机会再去研究,有结果,还会继续分享给大家。

第二个tab
第二个tab,非常像一个小型的chrome浏览器,只是没有地址栏。熟悉前端开发的读者一看右边的调试就会感觉非常亲切,这不就是chrome的调试器吗... 这个tab被激活时,最左侧下方会多出几个按钮,第一个是重启,就是重新编译的功能、及模拟小程序重新被打开的过程;第二个按钮,切换到后台,这个就可以模拟我们上面讲到的onShow,和onHide的生命周期;第三个按钮用来清除缓存。

第三个tab
最后,介绍一下第三个tab,它就是用来处理最后的流程:打包、发布。后面讲到发布流程的时候,会回来讲到这个界面。

到这里,第一篇文章就结束了。欢迎继续一起学习这一系列文章的第二篇。

新开微信交流群,欢迎入裙讨论: 群二维码

© 著作权归作者所有

jsongo0
粉丝 95
博文 11
码字总数 30662
作品 0
东城
私信 提问
加载中

评论(1)

菜鸟的羽毛
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
小程序云应用入门实操系列课程回顾及总结

专家介绍 白宦成 - Linux 中国开发组组长,阿里云MVP;CSDN专家 ,在 GitChat 平台上开设了《一学就会的 WordPress 实战课》达人课;自由职业者,曾就职于网易杭州研究院。 个人小程序作品:...

赤儒
04/28
0
0
xiajianbo/winxin-app-watch-life.net

WordPress版微信小程序 功能清单: 1.缩略图的方式显示文章列表(首页,分类文章),包括显示文章分类和发布时间,加载分页。 2.在首页用轮播方式显示置顶文章。 3.显示文章分类(专题),包...

xiajianbo
03/28
0
0
编程微刊第四期文章汇总(2018.4)

编程微刊创立也有一段时间了,在此感谢一直关注我的小伙伴们,你们的关注和支持,是我每天不断更新的动力,我每个月会总结一期微刊,方便大家的阅读。 1. 推荐文章 这个时代,抛弃你的时候,...

祈澈姑娘
2018/05/04
0
0
腾讯旗下小程序“三剑客”,创业者从哪个入门更容易?

2018年11月,QQ进行了新版本的更新,上线了“QQ小程序”——轻应用。仅仅两周之后,腾讯再一次加码小程序,推出了QQ浏览器小程序。腾讯如此着重小程序,也让不少创业者关注了起来。 国内虽然...

闪云科技
02/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nervos CKB 脚本编程简介[1]:验证模型

CKB 脚本编程简介[1]: 验证模型 本文作者:Xuejie 原文链接:Introduction to CKB Script Programming 1: Validation Model 本文译者:Jason,Orange 译文链接:https://talk.nervos.org/t/c...

NervosCommunity
32分钟前
6
0
消息中间件——RabbitMQ的高级特性

前言 前面我们介绍了RabbitMQ的安装、各大消息中间件的对比、AMQP核心概念、管控台的使用、快速入门RabbitMQ。本章将介绍RabbitMQ的高级特性。分两篇(上/下)进行介绍。 消息如何保障100%的...

Java架构师ya七
今天
9
0
如何编写高质量的 JS 函数(1) -- 敲山震虎篇

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ 作者:杨昆 一千个读者,有一千个哈姆雷特。 此系列文章将会从函数的执行机制、鲁棒性、函...

vivo互联网技术
今天
7
0
学会这5个Excel技巧,让你拒绝加班

在网上,随处都可以看到Excel技巧,估计已看腻了吧?但下面5个Excel技巧会让你相见恨晚。关键的是它们个个还很实用 图一 技巧1:快速删除边框 有时当我们处理数据需要去掉边框,按Ctrl+Shif...

干货趣分享
今天
11
0
JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部