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


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 相关文章推荐
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
微信小程序 搜索框组件代码实例
Sep 06 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
PHP 高手之路(三)
2006/10/09 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
js类 from qq
2006/11/13 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python上传package到Pypi(代码简单)
2016/02/06 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python之文件读取一行一行的方法
2018/07/12 Python
python实现归并排序算法
2018/11/22 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
海南地接欢迎词
2014/01/14 职场文书
搞笑车尾标语
2014/06/23 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
《角的度量》教学反思
2016/02/18 职场文书