小程序开发文档说明

2019-12-09 本文已影响0人 Sujz

小程序开发说明文档

一、目录结构:

pages目录 (小程序页面的集合)
- index 目录(index页面)
  - index.js (页面的私有程序)
    
    存在一个Page对象, 其指定页面的初始数据、生命周期回调、事件处理函数等
    
    参数示例:
    data: 页面的初始数据
    onLoad: 监听页面加载
    onShow: 监听页面显示
    onReady: 监听页面初次渲染完成
    onHide: 监听页面隐藏
    onUnload: 监听页面卸载
    onPullDownRefresh: 监听用户下拉动作
    onReachBottom: 页面上拉触底事件的处理函数
    onShareAppMessage: 用户点击右上角转发
  - index.json (页面的私有配置)
    
    权重高于全局配置,在页面有特殊需求时,可以覆盖全局配置
    基本参数与全局配置相同(部分特殊的全局参数除外)
  - index.wxml (页面的dom结构)
    
    WXML（WeiXin Markup Language）是框架设计的一套标签语言
    - 基本标签:
    view 与div等价,都是无意义的盒子容器,但在浏览器中还是会以dv渲染
    
    - 数据绑定:
    > 小程序的基本语法与vue相似,数据绑定也是类似
    1. 通过 {{ }} 来定义,会直接绑定 page 对象中, data 里面的值.也可以叫做文本插值
    2. 在属性中,即便是 '' 或 "" 内的 {{ }},也是可以进行数据绑定的.
    3. 小程序定义了关键字 true 和 false,可以在 {{ }} 内直接使用该布尔值
    4. 可以在 {{ }} 中进行运算,包括:三元运算 算术运算 逻辑判断 字符串运算 操作数组 操作对象 等
      
      示例代码:
```
// .wxml
<view> {{message}} </view>
<view id="item-{{id}}"> </view>
<checkbox checked="{{false}}"> </checkbox>
<view hidden="{{flag ? true : false}}"> Hidden </view>

// .js
Page({
  data: {
    message: 'Hello MINA!',
    id: 0
  }
})
```
    - 列表渲染:
      
      在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
      
      示例代码:
```
// .wxml 文件

// block是一个无意义的盒子,可以承载wx:for等指令,区别于view,该标签不会在页面中显示
<block wx:for="{{array}}">
  // index是小程序返回的当前循环的索引值, item为当前值
  <view>{{index}}: {{item.message}}</view>
</block>

// .js 文件
Page({
    data: {
      array: [
        {message: 'foo'}, 
        {message: 'bar'}
      ]
    }
  })
//------------------------------------------------
// .wxml 文件

// wx:for 也可以嵌套，下边是一个九九乘法表:
// 循环嵌套会导致 item名 或 index名 的重复,可以手动修改: wx:for-item wx:for-index
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>
```
    - 条件渲染:
      - wx:if(新增或删除)
        
        wx:if 来判断是否需要渲染该代码块,具体表现为新增和删除 dom 结构
        
        示例代码:
        
        <view wx:if="{{true}}}"> True </view> // wx:if 有额外的 wx:else,和 js里的 if elseif else 一样 <view wx:if="{{length == 1}}"> 1 </view> <view wx:elif="{{length == 2}}"> 2 </view> <view wx:else> 3 </view>
      - hidden(显示或隐藏)
        
        hidden 来判断是否需要显示该代码块,具体表现为显示或隐藏 dom 结构
        
        示例代码:
        
        <view hidden="{{false}}}"> False </view>
    - 模板(template):
      
      WXML提供模板功能，可以在模板中定义代码片段，然后在不同的地方调用。
      模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。
      
      示例代码:
```
// 定义模板
// 使用 name 属性，作为模板的名字,然后在<template/>内定义代码片段
// .wxml
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

// 使用模板
// 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
// .wxml
<template is="msgItem" data="{{...item}}"/>

// .js
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})
```
    - 引用文件:
      
      WXML 提供两种文件引用方式 import 和 include
      - import:
        
        import可以将整个文件引入,同时也就可以在该文件中使用被引入文件定义的模板
        但是只能使用被引入文件的模板,如果被引入文件也同时引入了其他文件及模板,该文件不可以使用
        
        示例代码:
        
        <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>
      - include:
        
        include 可以将被引入文件的 dom 直接渲染在 include 标签内,但是不包括模板和样式
        
        示例代码:
        
        // header.wxml <view> header </view> // footer.wxml <view> footer </view> // index.html <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> // 渲染后 <view> header </view> <view> body </view> <view> footer </view>
  - index.wxss 页面的私有样式表
    
    和css无区别
utils 公共函数目录(相当于公共组件,方法)
- utils.js 公共函数文件
  
  常用的公共函数封装,例如: date

app.js 小程序主体程序(也可以当做启动程序)

App(注册小程序)

App 对象指定小程序的生命周期回调等,必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

示例代码

App({
  onLaunch (options) {
    // 生命周期回调——监听小程序初始化
  },
  onShow (options) {
    // 生命周期回调——监听小程序启动或切前台
  },
  onHide () {
    // 生命周期回调——监听小程序切后台
  },
  onError (msg) {
    // 错误监听函数
    console.log(msg)
  }
})

app.json 小程序主体配置(全局配置,权重低于私有页面配置)

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
app.json中不能有注释,会报错
- 配置项:
  - pages
    
    小程序页面的集合数组,数组的第一项代表小程序的初始页面。
    小程序中新增/减少页面, 都需要对 pages 数组进行修改。
  - window
    
    用于设置小程序的状态栏、导航条、标题、窗口背景色。
    
    navigationBarBackgroundColor: 导航栏背景颜色
    navigationBarTextStyle: 导航栏标题颜色, 仅支持 black white
    navigationBarTitleText: 导航栏标题文字内容
    navigationStyle: 导航栏样式, custom 为自定义样式
    backgroundColor: 窗口的背景色
    backgroundTextStyle: 下拉 loading 的样式，仅支持 dark light:
    onReachBottomDistance: 页面上拉触底事件触发时距页面底部距离，单位为 px
  - tabBar
    
    配置项指定 tab 栏的表现, 以及 tab 切换时显示的对应页面
    
    color: 按钮上的文字默认颜色, 仅支持十六进制颜色
    selectedColor: 按钮上的文字选中时的颜色, 仅支持十六进制颜色
    backgroundColor: 按钮的背景色，仅支持十六进制颜色
    borderStyle: 按钮边框的颜色, 仅支持 black white
    - list (tab的列表)
      
      接受一个数组，只能配置最少 2 个、最多 5 个 tab, 每个项都是一个对象
      
      pagePath: 页面路径, 必须在 pages 中先定义
      text: 按钮内容
      iconPath: 图片路径, icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
      selectedIconPath: 选中时的图片路径
      position: tabBar 的位置, 仅支持 bottom / top
      position: 为 top 时, tab 的 icon 不显示
      custom: 自定义 tabBar
  - networkTimeout
    
    各类网络请求的超时时间,单位均为毫秒。
    - plugins
    > 声明小程序需要使用的插件。
  - navigateToMiniProgramAppIdList:
    
    当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时
    需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。
  - usingComponents:
    
    在此处声明的自定义组件视为全局自定义组件，
    在小程序内的页面或自定义组件中可以直接使用而无需再声明。
  - PermissionObject:
    
    小程序获取权限时展示的接口用途说明。最长 30 个字符
  - style:
    
    app.json 中配置 "style": "v2"可表明启用新版的组件样式。
app.wxss 小程序公共样式表

全局样式表,可以设置全局的初始样式
package.json 项目描述文件

项目的相关描述,例如: 项目名称,版本号,作者等
project.config.json 项目配置文件(微信开发者工具配置文件)

用来配置小程序及其页面是否允许被微信索引。

二、数据请求(wx.request)

小程序有自带的请求方法,使用也很简单

示例代码:

// .js
wx.request({
  url: 'test.php', //请求地址, 仅为示例，并非真实的接口地址
  data: { //请求参数
    x: '',
    y: ''
  },
  header: { //请求头
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    // 成功回调
    console.log(res.data)
  },
  fail (res) {
    // 失败回调
    console.log(res.data)
  },
  complete () {
    // 接口调用结束的回调函数(只要请求就会触发,无论请求的结果是成功还是失败)
    // todo...
  }
})

三、请求封装

封装 wx.request 请求
思路:

在 utils 中,新建 request.js文件,用于封装 wx.request
封装 request 方法,通过传参的方式,改变请求的 地址:url 方法:method 参数:data 来满足不同的请求需求
对请求的 成功回调:success 失败回调:fail 进行 Promise 操作
抛出封装后的请求,让 api.js 调用
在 utils 中,新建 api.js文件,所有的请求都在该文件下执行
在 api.js 中引入 request.js文件
调用 request.js 抛出的封装方法,传入对应的参数
return 出请求,将请求抛出给需求页面
在需求页面中引入 api.js 文件,以及 api.js 抛出的方法,进行后续的逻辑处理

示例代码(request.js):

//封装请求: 统一调用request方法,并且将所有api请求放在 api.js 中完成,方便后续接口维护.

//第一步: 定义 baseUrl(项目服务器域名)
const baseUrl = "http://127.0.0.1:7300/mock/5de5fb2e027f08151b7ad1c8/example"

//优化2: 单次请求未完成,避免用户再次请求,此处定义一个 变量
var hasClick = false;

//第二步: 抛出 封装的请求,传入基本参数: api(地址), method(请求方式), data(请求参数)
export default function request(api, method, data) {

  //第三步: return Promise 异步对象
  //Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
  //所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
  return new Promise((reslove, reject) => {
    
    //优化2: 用户第一次操作时,变量为 false,继续进行
    if (hasClick) {
      return
    }

    //优化2: 此时将变量改写为 true,如果此时用户再次操作,那么此时变量为 true,上面的操作会终止此次请求
    hasClick = true

    //优化1: 发起请求时,弹出 加载框,在请求完成后关闭
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    
    //第四步: 调用小程序内置api进行数据请求
    wx.request({
      
      //第五步: 传入所需参数
      url: baseUrl + '/' + api,
      method: method || 'GET',
      header: {
        'content-type': 'application/json'
        // 'token': wx.getStorageSync("token")
      },
      data: data || {},
      success: (res) => {
        //第六步: 成功回调:将现有对象转为 Promise 对象
        reslove(res.data, res)
      },
      fail: (msg) => {
        //第七步: 失败回调:返回一个新的 Promise 实例
        reject('请求失败');
      },
      complete: info => {
        //优化1: 请求完成后,关闭 加载框
        wx.hideLoading();

        //优化2: 当请求完成后,将变量还原为 false,使下次可以继续请求
        hasClick = false
      }
    })
  });
}

//第八步: 根据请求方式的不同,改变参数 method ,使之对应
['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
  request[method] = (api, data, opt) => request(api, method, data, opt || {})
});

示例代码(api.js):

import request from 'request.js'
//获取首页初始化数据
export function getIndexData() {
  return request.get("index", {});
}

示例代码(index.js):

// 引入 api.js 中的 getIndexData, other1, other2 方法
import { getIndexData, other1, other2 } from '../../utils/api.js'

// 调用这些方法
getIndexData().then(res => {
  // 成功回调
  console.log(res)
}).catch((e) => {
  // 失败回调
  console.log(e) 
})

四、公共方法库的完善

公共方法库主要是在根目录下 utils 目录中的 utils.js 文件中完成

date时间戳处理

// date时间戳处理 开始
const formatTime = date => {
  var date = new Date(date)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
// date时间戳处理 结束

表单正则验证

小程序开发文档说明

小程序开发说明文档

一、目录结构:

二、数据请求(wx.request)

三、请求封装

四、公共方法库的完善

猜你喜欢

热点阅读

小程序开发文档说明

小程序开发说明文档

一、 目录结构:

二、 数据请求(wx.request)

三、请求封装

四、公共方法库的完善

猜你喜欢

热点阅读

一、目录结构:

二、数据请求(wx.request)