小程序开发入门

gelory
258 阅读7分钟

前言

好久没有写博客了，正好最近公司在做小程序，就总结下这一周多以来我查阅到的小程序的入门知识，希望大家多多指教。（这篇博客我在知乎已发布，同步到掘金来给大家看看~）

准备工作

html，css，js就不用多说了，这些基本知识是必备的，对于现有的mvvm框架也要有一定的了解。官方文档中的组件和api部分建议重点看下，或者在实现具体项目的时候再查，总之常用的一些组件（view、image、scroll-view、swiper、button、form、textarea、navigater、canvas...）和api是要了解的。

开发工具我目前用的是微信开发工具，可以实时进行调试，上传也比较方便。

正文

  1. 代码结构

初始化项目之后，会生成一个初始化项目，代码结构如下：

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
└── utils
    └── util.js

其中app 就是描述小程序整体的一个容器，它会先于页面被初始化，它主要由三个文件构成：app.js、app.json、app.wxss。app.js里面可以放置一些公共的属性在globalData里（类似于vue框架中的store的作用），还可以存放一些公共的方法（直接写到APP({})的内部，与生命周期的函数同级）。我们在pages里面可以通过getApp()方法来获取到这些公共的属性和方法。

2. 小程序文件组成

一个小程序页面由四个文件组成，分别是：

其中前js,wxml,wxss就相当于我们在网页开发中的js，html，css，而json文件是为了配置当前小程序页面的标题栏样式、文字、页面背景等页面信息的。app.json是配置所有页面的公共信息，每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。

3. app.json

接下来重点看下app.json，小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

以上是文档中的例子，我们的app.json中还用到了subpackages这个配置项，用来对比较大的项目进行分包。因为微信对主包大小的限制，所以把一些子页面或者一些功能从主包中分离出去了，关于分包的内容比较多，可以看下这个博客。

小程序分包加载 - 个人文章 - SegmentFault 思否​
segmentfault.com图标

4. 新增页面

我们如果想新增页面，可以直接在app.json的pages里面加入相应的路由，保存之后你会发现，相应路由下面会自动新增四个文件（js，wxml，wxss，json）。而且自动新增的文件中都有初始化的内容，其中js文件会把一些生命周期的空函数写好，方便我们进行开发。

那js，wxml，wxss这三个文件跟我们平常网页开发中使用的文件有什么不同呢？

4.1 wxml

wxml文件中的标签，必须是微信文档中定义的组件，或者是在开发中我们自定义的组件。我们常用的div标签，在wxml中就相当于view，span标签类似于text。button，input，form，canvas这些常用的标签在wxml中也可以使用。但是不同的是，小程序中的部分组件是由客户端创建的原生组件，原生组件的层级最高，定义z-index样式没用，这些在开发的过程中要注意。原生组件有以下几种

4.1.1 数据的绑定，用{{}}来实现，在js文件的data中定义。

<!--wxml-->
<view> {{message}} </view>


// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

4.1.2 列表渲染，用wx:for实现，在列表渲染的节点中，可以直接用item表示当前循环项，index表示当前循环是第几项,，记得需要给每个循环项目加上key。

<!--wxml-->
<view wx:for="{{array}}" wx:key="index"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

4.1.3 条件渲染，1.用wx:if wx:else wx:elif，等实现，类似于vue中的v-if。2.hidden实现（当hidden的值为true时代表隐藏），类似于v-show。

二者的不同之处与vue中二者的不同之处一样，第一个是节点消失，第二个是节点display:none了。

4.1.4 事件的绑定，一般是以bind:事件名进行绑定事件的，其中点击事件是bindtap，或者是catchtap，后者可以阻止冒泡。

<!--wxml-->
<view bindtap="add"> {{count}} </view>
// page.js
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

其他的事件，可以查阅下面的文档：

事件 | 微信开放文档​
developers.weixin.qq.com

4.2 wxss

wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：

4,.2.1 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

也可以直接用px。

4.2.2 样式导入

可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

  margin:15px;

}

app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。

4.2.3 对于微信小程序wxss样式的使用来说，其实大部分都和css样式一致，具体见下面的文档：

微信小程序wxml和wxss样式_移动开发_zxhandroid的博客-CSDN博客​
blog.csdn.net图标

4.3 js

对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。简单的页面可以使用Page()进行构造。以下的代码中可以看到各个生命周期函数，需要注意的是，onload出现一次，而onshow可以多次出现。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

json文件中要加上"component": true。

在引用该组件的页面中的json文件要加上以下属性：

"usingComponents": {  "icon": "../icon/icon",  "swiper": "../swiper/index"  }

5. 路由跳转

页面路由跳转，主要有以下几种

wx.navigateTo(OBJECT)；wx.redirectTo(OBJECT)；wx.switchTab(OBJECT)；wx.navigateBack(OBJECT)

5.1 其中navigateTo是将原来的页面保存在页面栈中，在跳入到下一个页面的时候目标页面也进栈，只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面；

5.2 redirectTo和switchTab都是先清除栈中原来的页面，然后目标页面进栈，使用这两种跳转方式，都不能通过系统的返回键回到上一个页面，而是直接退出小程序；

5.3 switchTab跳转的页面必须是tabBar中声明的页面；面里面可以再次跳转按钮，否则无法回到上一个页面；

5.1 switchTab跳转的页面必须是tabBar中声明的页面；

5.5 tabBar中定义的字段不能超过5个页面，小程序的页面栈层次也不能超过5层。

5.1 navigateBack只能返回到页面栈中的指定页面，一般和navigateTo配合使用。

5.7 wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面


avatar
文章
阅读
粉丝