用户
 找回密码
 立即注册

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. 邀请
鲜花
鲜花 (4)
鸡蛋
鸡蛋

刚表态过的朋友 (4 人)

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