微信小程序-个人总结

简介

小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。这样在小程序中不能使用一些前端的框架,如jQuery、Zepto等。而网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行DOM选中和操作。

微信小程序-个人总结

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  • 常用的配置项
属性类型描述
pagesstring[]页面路径列表
windowObject全局的默认窗口表现
tabBarObject底部 tab 栏的表现
networkTimeoutObject网络超时时间
debugboolean是否开启 debug 模式,默认关闭
  • 部分常用配置选项
{
  "pages": [ // 第一项为默认首页
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色
    "navigationBarTextStyle": "black",//导航栏标题颜色
    "navigationBarTitleText": "微信", //导航栏标题文字内容
    "backgroundColor": "#eeeeee", //窗口的背景色
    "backgroundTextStyle": "light" //下拉 loading 的样式,仅支持 dark / light
  },
  "tabBar": {
    "color": "#666",//未选中的的文字颜色
    "selectedColor": "#ff8928",//选中的的文字颜色
    "list": [{
        "pagePath": "pages/index/index", //页面路径
        "text": "首页",//tab 上按钮文字
        "iconPath": "images/tabBar_img2.png", //未选中的图片路径
        "selectedIconPath": "images/tabBar_img1.png"//选中时的图片路径
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000, //wx.request 的超时时间
    "downloadFile": 10000 //wx.downloadFile 的超时时间
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [ //允许跳转到其他小程序的appId
    "wxe5f52902cf4de896"
  ]
}

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

注册小程序

整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数。
App({
  onLaunch (options) { //生命周期回调——监听小程序初始化
    // Do something initial when launch.
  },
  onShow (options) { //生命周期回调——监听小程序启动或切前台
    // Do something when show.
  },
  onHide () { //生命周期回调——监听小程序切后台
    // Do something when hide.
  },
  onError (msg) { //错误监听函数
    console.log(msg)
  },
  onPageNotFound(res){ //页面不存在监听函数
     // Do something when page not found. 
  },
  globalData: 'I am global data'
})
其他页面引用:

const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

页面生命周期

Page({
  data: { //页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) { //生命周期回调—监听页面加载
    // Do some initialize when page load.
  },
  onReady: function() { //生命周期回调—监听页面初次渲染完成
    // Do something when page ready.
  },
  onShow: function() { //生命周期回调—监听页面显示
    // Do something when page show.
  },
  onHide: function() { //生命周期回调—监听页面隐藏
    // Do something when page hide.
  },
  onUnload: function() { //生命周期回调—监听页面卸载
    // Do something when page close.
  },
  onPullDownRefresh: function() { //监听用户下拉动作
    // Do something when pull down.
  },
  onReachBottom: function() { //页面上拉触底事件的处理函数
    // Do something when page reach bottom.
  },
  onShareAppMessage: function (res) { //用户点击右上角转发
    if (res.from === 'button') {
        // 来自页面内转发按钮
     console.log(res.target)
    }
    return {
        title: '自定义转发标题',
        path: '/page/user?id=123'
    }
  },
  onPageScroll: function() { // 页面滚动触发事件的处理函数
    // Do something when page scroll
  },
  onResize: function() { //页面尺寸改变时触发,详见 响应显示区域变化
    // Do something when page resize
  },
  onTabItemTap(item) {  //点击 tab 时触发
    console.log(item.index); //被点击tabItem的序号,从0开始
    console.log(item.pagePath); //被点击tabItem的页面路径
    console.log(item.text); //被点击tabItem的按钮文字
  }
})

页面路由

框架以栈的形式维护了当前的所有页面
打开新页面
调用 API wx.navigateTo 
使用组件 <navigator url="/page/index/index" open-type="navigateTo"/>
页面重定向
调用 API wx.redirectTo 
使用组件 <navigator url="/page/index/index" open-type="redirectTo"/>
页面返回
调用 API wx.navigateBack 
使用组件<navigator url="/page/index/index" open-type="navigateBack">
用户按左上角返回按钮
Tab 切换
调用 API wx.switchTab 
使用组件 <navigator open-type="switchTab"/> 
用户切换 Tab
重启动
调用 API wx.reLaunch 
使用组件 <navigator open-type="reLaunch"/>

模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//引入并调用
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

常用API

名称说明
wx.showToast显示消息提示框
wx.showLoading显示 loading 提示框
wx.request发起 HTTPS 网络请求
wx.uploadFile将本地资源上传到服务器
wx.showShareMenu显示当前页面的转发按钮
wx.login调用接口获取登录凭证(code)
wx.checkSession检查登录态是否过期
wx.getAccountInfoSync获取当前帐号信息
wx.getUserInfo获取用户信息
wx.UserInfo用户信息
wx.authorize提前向用户发起授权请求
wx.setClipboardData设置系统剪贴板的内容
wx.getClipboardData获取系统剪贴板的内容

WXML

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
数据绑定
WXML 中的动态数据均来自对应 Page 的 data,使用双大括号将变量包起来。
<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。<br/>
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>


// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
条件渲染
在框架中,使用 wx:if="" 来判断是否需要渲染该代码块。<br/>
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})
wx:if vs hidden <br/>
因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。<br/>同时 wx:if 也是惰性的,如果在初始渲染条件为false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。<br/>
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。<br/>
一般来说,wx:if 有更高的切换消耗而 hidden。有更高的初始渲染消耗。<br/>
因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
模板
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
  }
})
引用
WXML 提供两种文件引用方式import和include。
  • import
import可以在该文件中使用目标文件定义的template
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

//引用
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
  • include
include 可以将目标文件除了template,wxs外的整个代码引入,相当于是拷贝到 include 位置。
<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。<br/>
与 CSS 相比,WXSS 扩展的特性有:<br/>
尺寸单位<br/>
样式导入
尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

微信小程序-个人总结

样式导入
/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
内联样式
<view style="color:{{color}};" />
<view class="normal_view" />
选择器

微信小程序-个人总结

WXS

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
模块
方式一:wxs标签
<!-- tools.wxs -->
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

<!--页面输出: -->
some msg
'hello world' from tools.wxs
方式二:require函数
<!-- tools.wxs -->
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!--logic.wxs-->
var tools = require("./tools.wxs");
console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

<!-- /page/index/index.wxml -->
<wxs src="./../logic.wxs" module="logic" />

<!--控制台输出:-->
'hello world' from tools.wxs
logic.wxs
some msg
变量
WXS 中的变量均为值的引用。<br/>
没有声明的变量直接赋值使用,会被定义为全局变量。<br/>
如果只声明变量而不赋值,则默认值为 undefined。<br/>
var表现与javascript一致,会有变量提升。<br/>
var foo = 1;
var bar = "hello world";
var i; // i === undefined

变量命名必须符合下面两个规则:
首字符必须是:字母(a-zA-Z),下划线(_)
剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)
注释
<!-- wxml -->
<wxs module="sample">
// 方法一:单行注释

/*
方法二:多行注释
*/

/*
方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</wxs>

事件

事件是视图层到逻辑层的通讯方式。<br/>
事件可以将用户的行为反馈到逻辑层进行处理。<br/>
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。<br/>
事件对象可以携带额外信息,如 id, dataset, touches
事件列表
类型触发条件
touchstart手指触摸动作开始
touchmove手指触摸后移动
touchcancel手指触摸动作被打断,如来电提醒,弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开
longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
longtap手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart会在一个 WXSS animation 动画开始时触发
animationiteration会在一个 WXSS animation 一次迭代结束时触发
animationend会在一个 WXSS animation 动画完成时触发
touchforcechange在支持 3D Touch 的 iPhone 设备,重按时会触发
submit提交表单
scroll滚动事件
事件绑定的写法以 key、value 的形式,key以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。<br/>
bind事件绑定不会阻止冒泡事件向上冒泡<br/>catch事件绑定可以阻止冒泡事件向上冒泡

组件

视图容器
名称功能说明
movable-view可移动的视图容器,在页面中可以拖拽滑动
cover-image覆盖在原生组件之上的图片视图
cover-view覆盖在原生组件之上的文本视图
movable-areamovable-view的可移动区域
scroll-view可滚动视图区域
swiper滑块视图容器
swiper-item仅可放置在swiper组件中,宽高自动设置为100%
view视图容器
基础内容
名称功能说明
icon图标
progress进度条
rich-text富文本
text文本
表单组件
名称功能说明
button按钮
checkbox多选项目
checkbox-group多项选择器,内部由多个checkbox组成
editor富文本编辑器,可以对图片、文字进行编辑
form表单
input输入框
label用来改进表单组件的可用性
picker从底部弹起的滚动选择器
picker-view嵌入页面的滚动选择器
picker-view-column滚动选择器子项
radio单选项目
radio-group单项选择器,内部由多个 radio 组成
slider滑动选择器
switch开关选择器
textarea多行输入框
导航
名称功能说明
functional-page-navigator仅在插件中有效,用于跳转到插件功能页
navigator页面链接
媒体组件
名称功能说明
audio音频
camera系统相机
image图片
live-player实时音视频播放
live-pusher实时音视频录制
video视频
地图
名称功能说明
map地图
画布
名称功能说明
canvas画布
开放能力
名称功能说明
web-view承载网页的容器
adBanner 广告
official-account公众号关注组件
open-data用于展示微信开放的数据

如果文章中有误的,可以留言告知。希望这篇文章对你有帮助!一起成长!一起进步!<br/>
此篇仅个人总结微信小程序,如果想查看更多的详情可以前往 微信小程序官网

相关推荐