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


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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
Vue单文件组件基础模板小结
Aug 10 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
在微信小程序中保存网络图片
Feb 12 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程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python 初始化多维数组代码
2008/09/06 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python打包成so文件过程解析
2019/09/28 Python
python selenium操作cookie的实现
2020/03/18 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
开业庆典答谢词
2014/01/18 职场文书
小学教师师德感言
2014/02/10 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
建筑工地宣传标语
2014/06/18 职场文书
目标责任书格式
2014/07/28 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
三八妇女节主持词
2015/07/04 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
关于保护环境的建议书
2019/06/24 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python