微信小程序开发专辑藏东藏西微信小程序开发

微信小程序开发入坑指南

2017-01-10  本文已影响3807人  _奔跑的炸鸡

前言

从去年一月份微信宣告要做小程序时的圈子里已经有了局部躁动，去年九月内测时，更是全民热捧，似乎张晓龙和他的微信已经准备好再一次改变世界。还好微信比它的粉丝们要理智的多，不做分发，不搞渠道，不发“红利”，所以，昨天正式发布时，也并没有想象中的所有人一起迎接新世界到来的景象。OSC上有人发帖问“微信小程序就要发布了,大家激动吗”，底下居然都已经有人开喷了。。
但是，话说回来，从技术角度看，微信为我们提供了基于微信本身的新应用场景下的新技术，那么作为一个开发者，对他有所了解还是有必要的。对于一个新技术，对其建立一个相对清晰的概念是最重要的事情，因为有了一个大概的印象之后，任何程序员都可以很快的学习和进步。因此，这篇文章，我不会照抄文档，也不会讲一些“高深”的东西，我们来解决初次接触无从下手的问题。学习怎么做出“Hell World”

开始前的准备

微信小程序官网：微信小程序官方网站
微信小程序开发工具下载地址：微信小程序下载地址

使用微信小程序开发工具

登录并创建项目

下载并安装微信提供的微信小程序开发工具之后，我来学习如何使用它。


登录界面

首先是登录界面，这里我们需要扫描二维码进入，即使我们没有在微信公众平台上申请注册小程序，也是可以扫描登陆的，所以，无需担心，直接用自己的微信扫描并登录即可。

然后在接下来出现的界面中，点击加号图片来建立我们的项目。

创建项目 创建项目

这里有几点需要注意：

  1. 如果已经申请到了小程序权限，那么直接填对应的Appid即可，如果没有的话直接点击无AppID选项，则可以创建本地项目。
  2. 微信Web开发者工具在创建项目的时候不会创建跟项目同名的项目文件夹，所以项目文件夹请提前手动创建好
  3. 不要为了图方便直接创建项目到桌面，mac版的开发工具无法在桌面创建项目。
  4. 最后的创建quick start项目 如果勾选的话，微信会在项目初始化后创建一个登录界面和打印日志的界面，是否勾选看个人意愿。初次使用的同学建议勾选上，可以更方便的对小程序有个初步认识。
认识开发界面
开发工具界面

项目创建完毕后，呈现给我们的就是主界面了。先说明一下左侧四个按钮的含义

认识项目结构
初始化项目目录

上图红色方框圈中的地方就是我们初始化之后的项目目录。
其中app.js，app.json和app.wxss文件时属于整个项目的全局文件。

接下来是页面的结构，微信小程序中每个页面对应四个文件，分别为.js .json .wxml 和.wxss

需要特别说明的是，如果不打算给页面写单独的配置文件，不要创建空白的.json文件，会导致页面路径查找失败。

修改布局文件

之前说了那么多概念，记不住也没关系，我们接下来通过动手来熟悉他们。
首先我们来试着添加代码“index.wxml”这个文件。

点击左侧的编辑按钮，在右侧的文件目录中找到index.wxml文件，然后随便写几句.

微信小程序提供的组件还是相对比较丰富的，具体支持的组件大家可以移步文档查看。

代码写完之后直接cmd+s保存就可以刷新预览视图，实时查看效果，很方便

基本语法也很简单，大家应该一看就会。
<text>这是一个文本</text>
组件之间可以相互嵌套，也就是说愿意的话，你可以这么写

 <button>
  <button>
    <button>
      <button>这是一个按钮</button>
    </button>
  </button>
</button>

只不过看起来很奇怪罢了

组件嵌套
绑定数据和事件

如果将微信小程序开发类比为iOS开发的话，.wxml文件就相当于.xib，而.js文件就相当于.m文件。这里的数据绑定其实就是在js中为.wxml中声明的变量提供数据，而事件绑定就是在js中实现.wxml文件中声明的方法。

我们先来看看数据绑定的例子。
我们在index.wxml文件里随便找个地方书写如下代码：

   <text>hello {{name}}</text>

这里这个name就是我们声明的数据，在申明时，我们需要用一种称之为Mustache的语法，不知道这是什么无所谓，记住在两边加上两个大括号就行了。而这个数据我们需要在.js中提供。我们打开index.js，找到page下的data：{},在其中添上一行name:"小明同学"

Paste_Image.png

然后cmd+s保存，看下预览视图，是不是出现了“hello 小明同学”.

提供绑定的数据

这里的page我们一会就会说，而这个data你可以认为就是用来提供数据源的，我们在.wxml中绑定的动态数据都来自对应page的data。

接下来我们来实现事件的绑定
我们再在index.wxml中随便找个地方,书写如下代码：

  <button bindtap="ToNewPage">跳转新界面</button>

这句话的意思就是我们创建了一个按钮，并给它绑定了一个叫做“ToNewPage”的点击方法。

bingtap即为button控件的点击方法

接下来我们要来实现这个方法，依然是在index.js里的page中添加，我们在data下面另起一行，写下如下代码

ToNewPage: function(){
wx.navigateTo({
  url: '../welcom/welcom',
  success: function(res){
    // success
  },
  fail: function() {
    // fail
  },
  complete: function() {
    // complete
  }
})
}
实现绑定的事件

我们在事件中写了一个跳转新页面的操作，试图跳转到一个位于welcom文件夹下的叫做welcom的页面，所以，想实现这个操作，我们还得先创建welcom页面。

wx.navigateTo()方法是微信提供的跳转页面的API，这种大量回调的编程风格，如果接触过Node.js或者Rect的同学可能比较熟悉。不熟悉的同学可以移步这里做个学习

创建新页面

前面已经说过，微信小程序的每个页面都需要四个文件，再加上微信小程序的定位决定了他不会有很多页面和很复杂的目录结构，所以，建议每个页面单独新建一个文件夹，方便管理。

还是在编辑模块，开发工具已经很贴心帮我们做好了创建文件夹或者对应格式文件的功能，但是这里需要注意的是，在创建四个个文件的时候，务必保证除后缀外名称一致。

创建文件

创建好后的文件如下所示

welcom

创建完之后，我们还要做以下两件事：
1.配置文件路径。如果不配置路径的话，则无法跳转到此页面。打开app.json文件，在pages数组中添加一行welcom的路径，添加后如图所示

配置路径

2.注册页面。如果不注册页面的话，编译器会报警"XXXX出现脚本错误或者未正确调用 Page()"。打开welcom.js，在里面书写如下代码。

Page({
 data:{
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
  // 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
 }
})

这样就可以完成页面的注册，然后之后再根据你的需要去写具体的代码。

这里请注意方法名的大小写，是Page不是page。

然后我们重新刷新页面，再次点击我们在index.wxml中写的按钮，会发现它直接就调转到了新写的页面。

到此为止，我们同时完成了新页面的创建和跳转以及事件的绑定。在.wxml文件中，还有列表渲染，条件渲染之类的概念，大家可以移步文档自行查看，基本概念大同小异。
接下来我们来看最后一部分，也是我们还没用到的.wxss文件。

样式

上面也说过，.wxss文件就是微信版的css，而且和传统css用法基本一模一样。也同时支持方便快捷的内联式的写法，和使用.wxss样式表文件来统布局的方法。优先级方面：内联>.wxss>app.wxss
在选择器方面的支持也比较全面，因此这里就不在展开讲，大家自行查看文档即可。

结束语

不管小程序会不会像之前人们吹捧的那样改变世界，至少，从开发者的角度讲，从完善的文档到量身定做的开发工具，微信这次真的是诚意满满。尤其是开发文档方面，应该是我见过的最清楚，最完善的开发文档了。因此，这篇文章就像前面所说，希望能帮大家解决一开始的无从下手的问题。等对微信小程序开发整体有了一个概念之后，配合详细的官方文档，开发微信小程序对每个开发者都不算难事。

最后，祝大家玩的开心。

如果我的文章帮到了您，请点赞或评论。如有不足之处，欢迎指出。

本文纯属原创，转载请注明出处。

上一篇下一篇

猜你喜欢

热点阅读