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


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分页脚本
May 21 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
javascript表单正则应用
Feb 04 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 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
中国第一家无线电行
2021/03/01 无线电
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
经典c++面试题六
2012/01/18 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
快递业务员岗位职责
2014/01/06 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
领导视察通讯稿
2015/07/18 职场文书
redis限流的实际应用
2021/04/24 Redis
Go gorilla/sessions库安装使用
2022/08/14 Golang