微信小程序开发日记(一)

微信小程序开发日记(一)

对于小程序的注册和创建无需废话,官方文档上都有,所以这一篇我主要整理的有:

  • 小程序的目录结构和各个文件在程序中的地位和作用
  • 小程序开发过程中所特有和常用的部分(单位rpx,以后发现会继续添加)

一、目录结构

先不管那三个文件夹,每个新创建的小程序都会有app.jsapp.jsonapp.wxss三个文件,下面简单介绍一下这三个文件的作用:

文件作用

首先是小程序中最常用到的三个文件:

  • app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量和方法,调用框架提供的丰富的 API
  • app.json对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题,调试开关注意该文件不可添加任何注释,新页面的添加填写在此。
  • app.wxss是整个小程序的公共样式表,可以把一些公用样式写在这里。

目录作用

新创建的小程序中有pagesutils两个文件夹:

  • pages第一个页面为小程序首页,每创建一个页面或一个公用组件,在此创建该页面或组件的目录。如存在一个index页面时,会有一个index目录,其下有index.jsindex.jsonindex.wxssindex.wxml四个文件。
  • utils存放一些小工具吧 比如一些逻辑的处理。可以跟自己的喜好来命名 比如 controller

二、小程序特有和常用部分

onload(options)

option是页面进入时url中所带的参数值。如url?index=0,那么可以用option.index取到为0的值。

尺寸单位rpx

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

事件

事件分成冒泡事件和不冒泡事件,冒泡事件会一直向上冒泡,不冒泡事件则不会。
下例中点击事件bindtap的用法以key、value的形式。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>  
Page({
  tapName: function(event) {
    console.log(event)
  }
})

页面跳转

在wxml中并没有<a>标签,所以小程序中的跳转是以另外两种方法来实现的:

  1. 逻辑层:使用小程序提供的api wx.navigateTo 来进行跳转
    示例代码
     wx.navigateTo({
         url: 'test?id=1'
     })
    
  2. 视图层:使用navigator标签

页面跳转传参

页面跳转时可以用GET方式将参数添加到链接后面,例如

/pages/bind/bind?sid=2015551509&password=123456

这样传过去的参数可以在新页面的onLaunchonShow函数的参数options中取得。

onLoad: function (options) {
  sid = options.sid
  password = options.password
},

条件渲染&循环渲染

微信小程序中有一个很有意思的条件渲染,用这个可以根据条件来判断显示部分内容

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

还可以使用<block>标签来判断是否显示某一块内容

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

类似的还有循环渲染

<view wx:for="{{[0, 1, 2, 3, 4]}}"> {{item}} </view>

模板

微信小程序中可以使用模板来简化开发过程

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}" data="{{...item}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
    <view>{{index}}</view>
</block>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

<template>来定义和使用标签,其中name用来定义,is用来使用,此外还可以用运算来决定使用哪个模板。值得注意的是,模板里面的变量是一个独立的作用域,也就是说样例中是无法取到0这个值的。

三、小程序的常见坑和开发捷径

1. 常见的坑

空格和换行怎么输入?

空格:
  • <text>中使用空格。
  • 中文全角空格
  • 下面这个
    {{" "}}
    
换行:
  • <text>中使用\n

2. 开发捷径

Flex模型

微信小程序中支持用flex模型来书写样式,用flex模型写,许多盒子模型写起来很麻烦都布局都能轻松完成,可以大大加快小程序的开发。