微信小程序实战(1)

何记云
914 阅读9分钟

前言

这段时间在忙其他的事情, 想到了微信小程序这一块, 就花了大概一周的时间, 来简单过一下微信小程序,本来之前写了一个微信小程序的基础文档, 但是自己看了一下, 觉得全是文字, 估计也不好理解, 就结合着项目来讲, 这里挑了一个简单的记账系统来作为示例, 其实也是我主要想讲一些基础的东西, 毕竟基础的会了, 更多深一点的东西, 各人有各人的想法, 这个项目呢, 不会去写后台, 我也没太多时间去写, 等后续写node的时候, 我会把这个当做前台来写, 到时候再完善吧.

正文

git 地址: github.com/hejiyun/fam…

  1. 首先创建一个微信小程序, 前提是下载微信开发者工具, 稳定版本的, 然后创建小程序, 需要注意的是正式的小程序需要审批, 拿到正式的appID, 测试时直接点测试appid就行.

  2. 可以使用微信开发者工具进行开发, 也可以使用webstrom支持小程序开发,这里直接用微信小程序.

  3. 　然后解释一下小程序的目录结构。
    project.config.json: 小程序的配置文件，包含项目打包配置、上传代码自动压缩等等，是一些开发、打包之类的配置。
    app.json: 当前项目的配置文件。包括项目的页面引入、导航条颜色、导航条标题 等等，是项目具体到代码开发上的配置。介绍几个配置：
    pages： 包含的页面。每次新增页面都得在这里引入，否则新页面的json配置等无法生效。 注意pages中页面先写的先渲染，所以数组第一条也就是我们的首页。在这里写了引入之后, 会在pages文件夹中自动生成对应文件夹
    window： 配置所有页面导航条字体、颜色、背景色等
    app.js: 小程序入口文件。生成小程序实例，App({}), 通常在这获取用户信息、授权信息、定义全局变量等。
    app.wxss: 小程序全局 style 文件。对整个项目页面生效。通常规定项目的 字体、基础颜色，定义一些公共样式。
    utils: 工具函数目录。通常用来放一些公共的js方法。比如封装的request请求，一些别的处理数据什么的方法。
    pages: 小程序的页面目录。所有的小程序页面，都写在这里面。

  4. 首先是项目图, 里面包含了我们这个项目所要做的页面. 可以直接去github上面看, image文件夹里有张项目图.
    从图的流程中, 我们可以先构建登录页(login), 修改密码页(forget), 和新用户注册页(register), 这三个页面,
    回到我们创建的项目, 在pages里只保留index文件夹, 作为主页, 其他创建项目附带的同级文件夹都删去,
    然后在到根目录下找到app.json. 将其中pages数组中其他的引用路径都删去, 然后添加上述的三个引用路径.
    这里说明一下, 使用微信开发工具时, 只要在app.json中添加引用路径, 那么, 项目pages中会自动生成对应文件夹, 同理, 删去文件夹/路径时, 也要删除对应的路径/文件夹.
    然后再添加一个setting个人中心的文件夹, 在微信小程序中, 一般都会有底部tabBar, 这个个人中心, 等会创建tabBar的时候用. 现在, pages中就有5个文件夹了. 具体如下

  1. 目前用到的页面创建出来了, 接下来创建项目通用的底部tabBar, 在微信小程序中, 只需要在app.json中,添加tabBar属性, 设置颜色等信息, 然后再list设置底部tab的个数,就可以了,
    这里说明一下, 被作为tabBar的页面路径, 需要使用switchBar进行跳转, 后面会结合实际讲.
    设置完tabbar之后, 我们还可以设置一下, 整体的背景, 也就是微信小程序顶部的样式
    包括标题等, 这些信息, 在app.json中的window属性中设置. 可以设置背景色, 标题文字, 文字颜色等.

  2. 这些设置完成后, 整体的风格就定下来了, 接下来就开始构建登录页了.
    这里我们打开项目始终会加载首页, 这个不急, 到后面使用权限判定直接去登录页就行 , 那么初步, 我们可以先了解一下小程序一个页面的构成

.json：常用的属性有2大块，navigationBarTitleText 相关的设置顶部标题的， usingComponents 引用的组件, 这个文件中不允许写注释.任何注释都会报错
json的写法为key-value格式, key要加上双引号, 单引号不行, 且value只能是数字, 字符串, 布尔值, 数组, 对象, 或者null, 不支持undefine和其他格式.

.js： getApp() 获取小程序实例，拿全局变量等； Page({}) 创建页面； data 当前页面的变量；onLoad 生命周期，页面加载完毕。

.wxml：注意，小程序支持的标签很少，像 span 是支持的，div不支持，一般用view代替块级，span、text 代替行级。 ----- 类似html, 提供类似wx:if功能, MVVM模式

.wxss：css方面没什么太大的变化, 除了不支持鼠标事件, 大部分css都支持. 选择器方面, 有些是不支持的
rpx(responsive pixel) 可以根据屏幕宽度自适应, rpx -> px :屏幕宽/750,
px ---> rpx 750/屏幕宽 在设计稿时, 推荐使用iphone6 作为视觉稿(375px), 2倍好计算
样式引入, 使用 @import

  1. 好了, 介绍完页面构成, 我们就开始写代码了, 首先在首页写一个text标签, 绑定一个tap事件, 让它可以跳转到登录页. 这里讲一下, **小程序绑定事件和方法使用的是bind, 可以看做是on, 作用类似, tap是手指触摸事件, 绑定事件有两种形式, bindtap 和bind:tap 作用都一样, 随便用哪一个, 但是需要注意的是, 绑定的事件方法名里, 是不支持形参的, 也就是说, 无论你绑定的是方法还是事件, 都没办法跟vue中一样可以直接通过形参传递你想要在方法中使用的参数. **
    当然, 你还是可以获取到想要的参数的, 只是换了个方式, 小程序中, 如果你想往方法事件中传递参数, 可以直接在标签上写data-参数名 好, 现在我传参了, 那么怎么获取呢? 我们先到.js文件中, 去创建这个Tologin方法,然后, 这个方法会有个默认形参, event, 这个参数中就包含了当前触发事件的标签的所有基本信息, 你可以在currentTarget-dataset中获取你传递的参数.所有以data前缀的参数都会被放在这里

  2. 好, 讲完了怎么传参,及绑定事件的基本规则, 那么我们接下来就要跳转到登录页去了, 那么, 这就需要讲下小程序在js中使用的四种跳转方法了:

//  这是最普遍的一种跳转方式，其官方解释为：“保留当前页面，跳转到应用内的某个页面”
wx.navigateTo({
  url: 'test?id=1'
})
// 关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
  url: 'test?id=1'
})
// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})
// 关闭所有页面，打开到应用内的某个页面。跟wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同  
这里要提到小程序中的  getCurrentPages() 方法
在wx.navigateTo中，每跳转一个新的页面，其原始页面就会被加入堆栈，通过调用   
wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面；

wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面 

wx.reLaunch 方法则会清空当前的堆栈。
wx.reLaunch({
 url: 'C?id=1'
 })
  1. 好, 上述讲了四种跳转方式, 那么这里, 明显我们需要的是关闭所有页面跳转的redirectTo了,这样的话,tabbar也会在登录页被隐藏掉, 之后呢, 就可以点击文字, 进行跳到登录页了, 这里又可以发现一个问题,就是左上角这个home键出现了, 但是呢, 这个肯定不是我们想要的效果, 我们需要把它隐藏掉, 这里, 我们可以在login.js中的onshow生命周期里, 使用wx.hideHomeButton() 就可以隐藏掉home图标了, 这里需要注意的是, 微信开发工具的版本需要调整一下, 低版本会报错, not function …. : 设置-> 项目设置-> 调试基础库->调整版本

解决完这个问题, 接下来可以给登录页换个标题, 只需要在login.json中添加"navigationBarTitleText":"登录" 就可以了. 或者在login.js中使用wx.setNavigationBarTitle({title: `登录`})

这里讲一下, 在小程序中,修改data中的值的时候, 需要使用this.setData({tel: ‘234’}), 用法类似于react的setState.

还有一个问题, 就是在使用input输入框的时候, 不要在标签上使用value,绑定data中的数据, 这个会造成由于双向绑定的输入闪烁的问题, 讲到这里, 讲一下,在小程序中, 给属性绑定值, 在双引号内使用双花括号进行绑定, 不需要其他操作, 它会自动解析, 如果需要使用字符串拼接, 那么就在双花括号内使用双引号写字符串, 然后与变量使用+ 号进行拼接: 如, 下面产生的字符串就是dsa${2wer}

另一个问题是在使用按钮的时候, 会发现给butto宽度设置时,无效, 这是因为微信新版本中app.json中使用了 style:v2来启用新版本组件样式, 可以使用important进行权重升级就好了.

然后就是写样式和组件了,以及写一些代码校验逻辑, 这里就不细讲了, 具体如下 然后忘记密码. 和新用户注册, 两个跳转, 使用的是可返回的跳转模式.

然后再把修改密码 和新用户注册页也完善一下样式和代码

三个页面构建完成之后, 我们现在可以模拟一下,修改密码或者新用户注册成功后, 应该是需要先提示一下, 然后再自动跳转到登录页, 这个场景, 那么, 这里就需要使用到一个提示框, 我们可以是用wx.showToast来创建提示框, 然后可以使用wx.navigateBack跳转到上一个页面, delta: 1 回到上一个页面, 2回到上两个页面, 数字代表步骤, 超出回到主页

avatar
文章
阅读
粉丝