用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序联盟 首页 教程 新手教程 查看内容

零基础小程序开发系列《一》理论篇

天下雪 2016-12-14 01:00

作者:wardenger,来自原文地址;作者正在更新,你可以在原文地址内关注,我们也会随着作者更新将作者的文章分为一个系列进行更新;前言本教程旨在为想学习小程序的同学提供一个快速上手的教程,如果你之前接触过rea ...

作者:wardenger,来自原文地址;作者正在更新,你可以在原文地址内关注,我们也会随着作者更新将作者的文章分为一个系列进行更新;

前言

本教程旨在为想学习小程序的同学提供一个快速上手的教程,如果你之前接触过react.js或者vue.js之类的前端框架,相信你很快就能学会小程序的开发。如果没有接触过,也不要有畏难心理,本教程主要面向的就是初学者,所以会尽量写的详细一点。相信跟我一起走完教程,一定可以学会小程序的开发。

ok,闲话少叙。

本教程分为三个部分:

第一部分:理论篇

这部分介绍微信小程序开发所涉及到的基础知识,让你对小程序的开发有一个整体的概念。

第二部分:实战篇

将带领读者朋友们和我一起开发一个真正的小程序,和我一起享受编程的乐趣。

第三部分:附录

一些额外的内容将在附录中说明。

在学习过程中,如果你有任何疑惑,请关注我的微信公众号,直接提问即可。

搭建开发环境

  1. 下载最新版微信小程序开发工具: 下载页面

  2. 选择适合你系统的版本进行安装,目前支持windows32,windows64以及mac系统

  3. 安装完成之后,打开微信web开发者工具,然后用手机微信扫码登陆。

  4. 选择添加项目,可以看到,要添加一个新的小程序项目需要填写三部分内容:AppID,项目名称,项目目录。

在这里,为了能快速开发,我们先选择 无AppID 这个选项,更多有关AppID的内容,可以到附录中查看。这里不再赘述。

项目名称,就是你给你的项目取一个名字。

项目目录,是指你的小程序的代码将放在哪个目录下,你可以自己在本地创建一个文件夹,也可以在github创建一个新项目,都可以。在这里为了简单,我直接在桌面新建了一个文件夹。

注意,填好信息之后,工具会默认勾选 在当前目录中创建quick start项目 这个选项,我们使用默认的就好,不需改动。

如果一切顺利,单击添加项目后,你应该能看到下面这张图所示的内容。

至此,开发小程序的环境已经搭建完成,本节内容也到此结束,下节我们将介绍如何配置小程序!

配置小程序

这一节,我们将介绍小程序的配置。首先,让我们来看看项目自动生成的app.json文件长什么样子。

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "WeChat",
  10. "navigationBarTextStyle":"black"
  11. }
  12. }

其实这里,共有五个部分可以配置,分别是pageswindowtarBarnetworkTimeoutdebug

pages:定义的是这个小程序由哪些页面组成。

在以后需要新增或者减少页面时,都需要在这里进行设置,有几个页面pages数组就有几项。

可以看到pages是一个数组,而数组的第一项就是小程序的初始页面,你可以试着把 logs 页面移动到最前面看看效果,这在开发的时候是一个不错的小技巧。

还有一个技巧要分享给你的是,在我们需要添加一个新页面的时候,没必要傻傻的手动去创建文件夹,然后新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss这四个文件。我们只要在 pages数组中 添加一个你想创建的页面,然后 Ctrl + s 保存即可!是不是很酷?

  1. {
  2. "pages":[
  3. "pages/logs/logs",
  4. "pages/index/index"
  5. ],
  6. ...
  7. }

window: 定义的是窗口的配置信息。

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black/white
navigationBarTitleTextStringa导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新
tarBar: 用来定义 tabBar 的表现

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

我们可以在项目目录下添加一个images文件,用来存放我们的图片文件。

注意:目前小程序只支持网络图片或者base64图片,使用本地图片需要将图片转为base64代码

  1. {
  2. "tabBar": {
  3. "backgroundColor": "#fbfbfb",
  4. "borderStyle": "white",
  5. "selectedColor":"#50e3c2",
  6. "color": "#aaa",
  7. "list": [{
  8. "pagePath": "pages/index/index",
  9. "text": "首页",
  10. "iconPath": "images/home.png",
  11. "selectedIconPath": "images/homeHL.png"
  12. },{
  13. "pagePath": "pages/me/me",
  14. "text": "我",
  15. "iconPath": "images/me.png",
  16. "selectedIconPath": "images/meHL.png"
  17. }]
  18. }
  19. }
networkTimeout: 用来设置各种网络请求的超时时间。

如果你不是很清楚这个networkTimeout配置有什么作用,那么忽略就好。这对实际开发并没有什么影响。

属性类型必填说明
requestNumberwx.request的超时时间,单位毫秒
connectSocketNumberwx.connectSocket的超时时间,单位毫秒
uploadFileNumberwx.uploadFile的超时时间,单位毫秒
downloadFileNumberwx.downloadFile的超时时间,单位毫秒

以下代码仅为示例

  1. {
  2. "networkTimeout": {
  3. "request": 5000,
  4. "connectSocket": 5000,
  5. "uploadFile": 5000,
  6. "downloadFile": 5000
  7. },
  8. "debug": true
  9. }
debug

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info的形式给出,其信息有 Page 的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

如果开启 debug 模式见上面代码

好了,五个部分介绍完了,希望各位在学习完这一节后可以尽情探索,修改各种配置看看效果,毕竟这样印象会更加深刻。

下一节我们将讲到小程序的项目结构。

项目结构

pages

这个文件夹用来存放小程序的页面,可以看到,其中的每个文件夹就表示一个页面,比如,要定义index的页面如何表现,就在index文件夹中的四个文件中定义。

一个页面由四个文件组成,分别是 xxx.jsxxx.jsonxxx.wxmlxxx.wxss

  • xxx.js 将在下小节讲到,因为这里涉及到的内容比较多,需要单独列出一节来讲。

  • xxx.json 和 app.json 类似,app.json是整个微信小程序的配置文件,而xxx.json是xxx这单个页面的配置文件。

比如,logs.json 文件就配置了logs这个页面的 导航栏的标题~

  1. {
  2. "navigationBarTitleText": "查看启动日志"
  3. }

对了,如果你想让某个页面支持下拉刷新,记得在其json文件中配置 enablePullDownRefresh 为 true

注意:json 文件中不能有任何注释,不然会报错。

  • xxx.wxml 可以把它看作是 html 的变种,同样是xml的语法。

  • xxx.wxss 则可以看成是 css 。

这里需要理解的就是,小程序的开发 其实就是用开发网页的技术来开发,这大大节省了我们前端人员的学习成本。但同时也要注意,这货并不是HTML5,虽然它很像,开发过程中会遇到很多坑。

utils

这个文件夹中的utils.js主要用来定义一些公用的函数。

我们也可以在里面新建一个 api.js 文件来抽象我们服务器的地址。

app.js

这部分内容同样放在下一节一起讲!

app.json

这个文件的作用我们在上一节已经讲过了,是整个小程序的配置文件。

app.wxss

这里定义的是整个小程序的 样式表

页面生命周期

终于到了小程序最核心,最关键的部分了,也是我个人认为最难讲的一部分内容。这里我说难讲倒并不是它有多难,各位不要慌。

既然本章的题目叫做生命周期,那么就先讲一讲生命周期的概念吧。

app.js

将你原来的app.js替换成以下代码,然后 点击 微信web开发者工具左侧的 调试 按钮,console的选项。
最后点编译。观察console的输出效果,再点击 微信web开发者工具的 后台按钮,观察console的输出。

onLaunch,onShow,onHide,这些函数叫做生命周期钩子函数,通过这些函数,你可以让程序在特定的时候(程序生命周期的某个阶段)执行你的代码。

  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. //调用API从本地缓存中获取数据
  5. var logs = wx.getStorageSync('logs') || []
  6. logs.unshift(Date.now())
  7. wx.setStorageSync('logs', logs)
  8. },
  9. onShow: function() {
  10. console.log('App onShow')
  11. },
  12. onHide: function() {
  13. console.log('App onHide')
  14. },
  15. getUserInfo:function(cb){
  16. var that = this
  17. if(this.globalData.userInfo){
  18. typeof cb == "function" && cb(this.globalData.userInfo)
  19. }else{
  20. //调用登录接口
  21. wx.login({
  22. success: function () {
  23. wx.getUserInfo({
  24. success: function (res) {
  25. that.globalData.userInfo = res.userInfo
  26. typeof cb == "function" && cb(that.globalData.userInfo)
  27. }
  28. })
  29. }
  30. })
  31. }
  32. },
  33. globalData:{
  34. userInfo:null
  35. }
  36. })

xxx.js

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

  1. Page({
  2. data: {
  3. text: "This is page data."
  4. },
  5. onLoad: function(options) {
  6. // Do some initialize when page load.
  7. },
  8. onReady: function() {
  9. // Do something when page ready.
  10. },
  11. onShow: function() {
  12. // Do something when page show.
  13. },
  14. onHide: function() {
  15. // Do something when page hide.
  16. },
  17. onUnload: function() {
  18. // Do something when page close.
  19. },
  20. onPullDownRefresh: function() {
  21. // Do something when pull down.
  22. },
  23. onReachBottom: function() {
  24. // Do something when page reach bottom.
  25. },
  26. // Event handler.
  27. viewTap: function() {
  28. this.setData({
  29. text: 'Set some data for updating view.'
  30. })
  31. },
  32. customData: {
  33. hi: 'MINA'
  34. }
  35. })

data 中的 text 默认内容是 "This is page data.",通过viewTap这个函数中的setData会让text的内容变成'Set some data for updating view.'那么这有什么作用呢,试想一下,如果这个text是某个 class的名字?是某个状态?

到这里,我们的理论部分就到这里结束了。相信你对小程序的理论知识已经有了一个初步的了解,但还是有一点模糊,那么第二部分的实战篇就是为了让我们能够结合理论来进行实践,敬请期待!

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: wardenger 来自: 授权地址