微信小程序学习(1)

微信小程序

本章只是对一些常用的给介绍了,不足之处请指出,大家一起学习,萌新上路

一. 主要文件

1. app.js 全局生命周期

微信小程序生命周期:

  • onLaunch 打开APP就被调用,只有一次
  • onShow 打开小程序触发,可多次
  • onHide 从手机端到后台就会触发的时间(按home键之后触发等
  • onError 小程序出现错误时,可以统一处理
  • 其他 小程序提供自定义全局方法

1. app.json

  • pages: [] 存放所有页面,默认第一个显示
  • window: {} 窗口设置 颜色等
  • tabBar: {} 底部导航栏
    以下是底部导航栏模板
"tabBar": {
    "list": [
        {
        	"pagePath": "pages/xxx/xxx"
        	"text": "首页"
        }
    ]
}

1. xxx.js 页面生命周期

普通页面生命周期:

  • onLoad: 页面加载 执行一次,可以获取传递过来的参数
  • onShow: 页面打开时调用
  • onReady: 页面初次渲染完成,只会执行一次,可以和视图层操作
  • onHide: 页面隐藏,navigateTo 或底部 tab 切换调用
  • onUnload: 页面卸载,执行 redirectTO 或 navigateBack(上一级)调用

二. 常用基本功能

在这里没介绍还未介绍请求效应

1. 小程序获取全局变量和赋值方式

var app = getApp() //getApp() 是一个全局方法
this.setData({
    xxx: app.xxx
})
// 获取当前data中的属性
this.data.xxx

2. 断点

​ 只需要在对应代码上加一台代码 debugger,可进行在微信小程序段测试,也可以在手机端测试,这里不做多介绍,本人也只做过PC端测试,手机端测试一般是测试 onHide 等需要手机端才可看到实际效果


3. wx.redirectTo 和 wx.navigateTo

3.1 wx.redirectTo 重定向

// 重定向页面,可以传值,新页面可以在 onLoad(o) 接受参数
// path 接收的是相对路径
var path = ''
wx.redirectTo({
  url: path?key1=value&key2=value2
})
// 使用 redirectTo 会触发 onUnload 事件, 且没有后退
// path对应页面接收
onLoad: function(option){
	var val1 = option.query.key1
    var val2 = option.query.key2
}

3.2 wx.navigateTo 跳转

// 挑战页面,可以传值,新页面可以在 onLoad(o) 接受参数
// path 接收的是相对路径
var path = ''
wx.navigateTo({
    url: path?key1=value&key2=value2
})
// redirectTo 触发本页面 onHide 事件
onHide: function () {}
// path对应页面接收
onLoad: function (option) {
	var val1 = option.query.key1
	var val2 = option.query.key2
}
// 点击回退时,只会触发 onShow 事件, 因为页面没被卸载
// 没有触发 onLoad 和 onReady 

事件避免使用过多 navigateTo,会使页面叠加,影响体验效果


4. 页面其他API事件

  • onPullDownRefresh 下拉刷新事件, 分页效果
  • onReachBottom 上拉刷新事件
  • onShareAppMessage 分享转发
  • onPageScroll 页面滚动事件
  • onTabItemTap 点击 tab 页时触发的事件,
  • 其他自己定义的。

5. 组件绑定事件 (bindtap & catchtap)

<view id="tapTest" bindtap="clickMe" data-haHa="haha">点击事件</view>
<!-- bindtap 冒泡事件,catchtap 非冒泡事件 -->
page({
    clickMe (event) {
        // event 事件对象,就是调用的组件
        console.log('点击事件',event)
        // 对应触发元素上的 data 属性 data-xxx
        console.log('触发元素',event.target.dataSet)
        // 同样可以获取捕事件元素的 data 属性 
        console.log('捕获事件元素',event.currenTarget。dataSet)
        console.log('haHa', event.currentTarget.dataSet.haha)
    }
})

6. 模块化

​ 在微信小程序中,可以将一些公共的代码抽离为一个单独的js文件,作为一个模块,而在其它需要使用的页面,对该js文件进行引用。而模块的内容通过module.exports 或 exports 来对外暴露接口。而在需要使用的地方,使用关键字 require(path) 进行引入。
require 不支持绝对路径

function sayHello (name) {
    console.log(`hello ${name}`)
}
function sayGoodbye (name) {
    console.log('Goodbye ' + name)
}
// 导出方式
module.exports.sayHello = sayHello
exports.syaGoodbye = sayGoodbye
// 引入方式
var common = require('xxx.js')

7. 数据绑定

7.1 大括号表达式 {{ XX }}

<!-- 内容上 -->
<view>{{message}}</view>
<!-- 组件属性上 需要在双引号中-->
<view id="item-{{id}}"></view>
<!-- 关键字 -->
<checkbox checked="{{flage}}"></checkbox>
<checkbox checked="{{!falg}}"></checkbox>
<!-- 运算: 逻辑运算、算术运算、字符串运算等  -->
{{a + b === 3 ? 'true' : 'false'}}
<!-- 优先执行算术运算-->
{{a + b + message}}
Page({
    data: {
        id:0,
        message: 'hello world',
        flag: false,
        a: 1,
        b: 2
    }
})

8. 列表渲染 (wx:for)

  • <view wx:for="{{Array}}"></view> 带自身节点
  • <block wx:for="{{Array}}"></block> 不带自身节点
  • 如果遇到需要随机排序,则需要设置 key 值,不然容易出现混乱
<view class="container">
    
  <!-- users 是一个对象数组 -->
	<view wx:for="{{users}}">
    	下表:{{index}}, 对象:{{item}}
    </view>
    
	<!-- 可修改 下表跟对象的 -->
	<view wx:for="{{users}}" wx:for-index="id" wx:for-item="user">
    	下表:{{id}}, 对象:{{user}}
  </view>
    
	<!-- 使用 block 渲染, 只会重复子节点,不会重复本身-->
	<block wx:for="{{users}}" wx:for-index="id" wx:for-item="user">
    	下表:{{id}}, 对象:{{user}}
  </block>
</view>

9. 条件渲染 (wx.if & hidden)

  • 带自身节点: <view wx:for="{{Array}}"></view>
  • 不带自身节点:<block wx:for="{{Array}}"></block>

if 和 hidden:

  • if 是惰性加载,每次切换时都会销毁或重新渲染,相当于 display: none,适用于运行条件不大可能改变的
  • hidden 组件始终渲染,适用于频繁切换
<!-- 查看对应的页面结构可知 -->
<view wx.if="false">if</view>
<view hidden="false">hidden</view>

10. 页面引用模板 (template)

  • 定义模板:<template name="[templateName]"></template>
  • 引用模板:is = "[templateName]"
  • 传入参数: data={{data}}
  • 跨页面引入:<import src="templateFileName.wxml" />
  • 跨页面引入,需要把对应的 xss 样式也引入进去
<template name="temp1">
  <view>姓名:{{name}}</view>
  <view>年龄:{{age}}</view>
  <view>地址:{{address}}</view>
  <view>备注:{{remark}}</view>
  <view>消息:{{msg}}</view>
</template>

<view class="container">
  <!-- 模板接收的是属性值,所以需要把对象解析 采用es6语法 ... -->
	<template is="temp1" data="{{...person, msg, name: 'zxh', age: 18}}"></template>
</view>
Page({
  data: {
    person: {address: '北京', remark: '演示第一个模板'}
    msg: '这是一条消息'
  }
})
<!-- new.wxml -->
<import src="../temps/temps.wxml"/>
<template is="mytemp" data="{{name: 'zxh', age: 18}}"></template>

11. WXS 模块

  • 定义 *.wxs 文件, modeule.exports 暴露接口和属性
  • 引入:<wxs src="" module="" />
  • 一般用来做工具类,如时间格式,字符串处理,过滤
  • 使用 require 函数,可以引入另一个模块

​ WXS 是与 wxml 一同于视图层,运行在同一个线程内, 因此减少了线程通信的开销。

​ 小程序在Android上,使用V8引擎解析和渲染 JavaScript; 而在iOS上,则是使用 JavaScriptCore,这两者在解析性能的表现上差异比较大,相对来说 V8 的性能比 JSC 要好得多,那么在 IOS 的小程序中,使用脱离 JavaScript 环境的 WXS,就会使性能有更多的提升,这也是WXS文档中提及 “在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍” 的具体原因。
个人觉得,WXS 模块类似于 vue 的 fiter 全局过滤器的作用

/** module.wxs*/
var name = 'zxh'
var age = 18
var method = function (obj) {
  return obj
}

module.exports = {
  name: name,
  age: age
  method: method
}
<!-- wxs.wxml -->
<view>
	<WXS src="module.wxs" module="item"></WXS>
  <view>姓名:{{item.name}}</view>
  <view>年龄: {{item.age}}</view>
  <view>方法:{{item.method('参数’)}}</view>
</view>
// module2.wxs 引入modelu
 var num2 = require('module.wxs')

12. include 引入页面

​ template,wxs除外,其他页面都可以引入,达到共用

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

这种就像是上中下布局一样

13. 标签属性

​ 标签属性的属性值只有 true 和 false 的,且默认值为 false 情况下,直接在标签添加该属性,则该属性值为 true

展开阅读全文

没有更多推荐了,返回首页