微信小程序学习笔记之函数定义、页面渲染图文详解


Posted in Javascript onMarch 28, 2019

前面一篇介绍了微信小程序目录结构、基本配置。这里再来介绍一下函数定义、页面渲染。

小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等。整个小程序只有一个 App 实例,全部页面共享使用。

微信小程序学习笔记之函数定义、页面渲染图文详解

//app.js
App({
 onLaunch: function () {
 // 展示本地存储能力
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 // 登录
 wx.login({
  success: res => {
  // 发送 res.code 到后台换取 openId, sessionKey, unionId
  }
 })
 // 获取用户信息
 wx.getSetting({
  success: res => {
  if (res.authSetting['scope.userInfo']) {
   // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
   wx.getUserInfo({
   success: res => {
    // 可以将 res 发送给后台解码出 unionId
    this.globalData.userInfo = res.userInfo
    // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
    // 所以此处加入 callback 以防止这种情况
    if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
    }
   }
   })
  }
  }
 })
 },
 globalData: {
 userInfo: null
 }
})

生命周期函数:

属性 类型 描述 触发时机
onLaunch Function 生命周期回调—监听小程序初始化 小程序初始化完成时(全局只触发一次)
onShow Function 生命周期回调—监听小程序显示 小程序启动,或从后台进入前台显示时
onHide Function 生命周期回调—监听小程序隐藏 小程序从前台进入后台时
onError Function 错误监听函数 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
onPageNotFound Function 页面不存在监听函数 小程序要打开的页面不存在时触发,会带上页面信息回调该函数
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问

页面js:

微信小程序学习笔记之函数定义、页面渲染图文详解

页面js中定义分享函数,定义之后右上角菜单才可以分享:

 

微信小程序学习笔记之函数定义、页面渲染图文详解

Page({
 onShareAppMessage: function (res) {
 if (res.from === 'button') {
  // 来自页面内转发按钮
  console.log(res.target)
 }
 return {
  title: '自定义转发标题',
  path: '/page/user?id=123',
  imageUrl: 'https://msllws.top/Public/uploads/2018-09-19/5ba1efaec1b1f.jpg'
 }
 }
})

页面js中调用全局函数:

var AppInstance = getApp()
console.log(AppInstance.globalData)

工具栏utils.js:存放常用的工具函数,例如日期格式化、时间格式化函数。定义后通过module.exports注册,在其他页面才可以使用。

微信小程序学习笔记之函数定义、页面渲染图文详解

练习:做出如下图页面及样式

微信小程序学习笔记之函数定义、页面渲染图文详解

weather.js:

Page({
 data: {
 temp:"4℃",
 low:"-1℃",
 high:"10℃",
 type:"晴",
 city:"北京",
 week:"星期四",
 weather:"无持续风行 微风级"
 }
})

weather.wxml:

<view class="content">
 <view class="today">
 <view class="info">
  <view class="temp">{{temp}}</view>
  <view class='lowhigh'>{{low}}</view>
  <view class='type'>{{type}}</view>
  <view class='city'>{{city}}</view>
  <view class='week'>{{week}}</view>
  <view class='weather'>{{weather}}</view>
 </view>
 </view>
</view>

weather.wxss:

.content{
 font-family: 微软雅黑,宋体;
 font-size:14px;
 background-size: cover;
 height: 100%;
 width: 100%;
 color: #333333;
}
.today{
 padding-top: 70rpx;
 height: 50%;
}
.temp{
 font-size: 80px;
 text-align: center;
}
.city{
 font-size:20px;
 text-align: center;
 margin-top: 20rpx;
 margin-right: 10rpx;
}
.lowhigh{
 font-size: 12px;
 text-align: center;
 margin-top: 30rpx;
}
.type{
 font-size: 16px;
 text-align: center;
 margin-top: 30rpx;
}
.week{
 font-size: 12px;
 text-align: center;
 margin-top: 30rpx;
}
.weather{
 font-size: 12px;
 text-align: center;
 margin-top: 20rpx;
}

数据绑定:

<!--wxml-->
<view> {{message}} </view>

page.js:

Page({
 data: {
 message: 'Hello MINA!'
 }
})

列表渲染:

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

page.js

Page({
 data: {
 array: [1, 2, 3, 4, 5]
 }
})

微信小程序学习笔记之函数定义、页面渲染图文详解

条件渲染:

<!--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'
 }
})

模板:

<!--wxml-->
<template name="staffName">
 <view>
 FirstName: {{firstName}}, LastName: {{lastName}}
 </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
 data: {
 staffA: {firstName: 'Hulk', lastName: 'Hu'},
 staffB: {firstName: 'Shang', lastName: 'You'},
 staffC: {firstName: 'Gideon', lastName: 'Lin'}
 }
})

微信小程序学习笔记之函数定义、页面渲染图文详解

事件:

<view bindtap="add"> {{count}} </view>
Page({
 data: {
 count: 1
 },
 add: function(e) {
 this.setData({
  count: this.data.count + 1
 })
 }
})

微信小程序学习笔记之函数定义、页面渲染图文详解

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
js 验证密码强弱的小例子
Mar 21 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 #Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 #Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 #Javascript
vue-cli中使用高德地图的方法示例
Mar 28 #Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 #Javascript
vue+iview/elementUi实现城市多选
Mar 28 #Javascript
You might like
mysql limit查询优化分析
2008/11/12 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
便利店投资创业计划书
2014/02/08 职场文书
新学期标语
2014/06/30 职场文书
学生安全责任书模板
2014/07/25 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
一行Python命令实现批量加水印
2022/04/07 Python
MySQL中order by的执行过程
2022/06/05 MySQL
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技