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


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 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
理解Javascript闭包
Nov 01 Javascript
JS根据生日算年龄的方法
May 05 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
TS 类型兼容教程示例详解
Sep 23 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之sprintf函数用法详解
2014/11/12 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python sys模块常用方法解析
2020/02/20 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
自荐信格式的六要素
2013/09/21 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
贷款担保书范本
2015/09/22 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python