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

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

小程序逻辑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
 })
 }
})

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

(0)

相关推荐

  • 微信小程序渲染性能调优小结

    网页的性能优化是前端开发老生常谈的热门话题,其中微信小程序因其页面双线程架构设计,所以性能优化的手段跟传统的 H5 应用不太一样.今天主要介绍一下微信小程序页面双线程架构的特性给页面渲染带来的一些影响,以及应对的一些渲染性能调优策略.为了叙述方便,下文会把微信小程序简称为小程序. 小程序的双线程架构 与传统的浏览器Web页面最大区别在于,小程序的是基于 双线程 模型的,在这种架构中,小程序的渲染层使用 WebView 作为渲染载体,而逻辑层则由独立的 JsCore 线程运行 JS 脚本,双方并不

  • 微信小程序页面渲染实现方法

    这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 条件渲染:wx:if, wx:elif, wx:else <view wx:if="{{list.length > 5}}" >1</view> <view wx:elif="{{list.length > 2}}">2</view> <view wx:els

  • 微信小程序使用for循环动态渲染页面操作示例

    本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了 其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text

  • 微信小程序遇到修改数据后页面不渲染的问题解决

    微信小程序遇到修改数据后页面不渲染的问题解决 前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,

  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun

  • 微信小程序调用天气接口并且渲染在页面过程详解

    前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo. 先上效果 开始写代码: 1:找打一个免费的天气接口 免费接口api: https://www.apiopen.top/api.html#top https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%

  • 微信小程序学习笔记之获取位置信息操作图文详解

    本文实例讲述了微信小程序学习笔记之获取位置信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序文件上传.下载操作.这里分析一下获取位置信息操作. [获取当前位置信息]wx.getLocation() getlocation.wxml: <view> <button bindtap="getlocation">获取位置</button> </view> getlocation.js: Page({ getlocation: fu

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

    前面一篇介绍了微信小程序目录结构.基本配置.这里再来介绍一下函数定义.页面渲染. 小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等.整个小程序只有一个 App 实例,全部页面共享使用. //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStor

  • 微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

    本文实例讲述了微信小程序学习笔记之跳转页面.传递参数获得数据操作.分享给大家供大家参考,具体如下: 前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理.现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到官方文档的一句话打消了念头,因为没有认证...... [方法一 使用navigator组件跳转传参] 前台博客列表页面data.wxml:(后台数据交互参考上一篇) <view wx:for="{

  • 微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

    本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&

  • 微信小程序学习笔记之目录结构、基本配置图文详解

    本文实例讲述了微信小程序学习笔记之目录结构.基本配置.分享给大家供大家参考,具体如下: 结束了一段时间的学习,开始一段新的学习旅程 -- 微信小程序.现在出去找工作只会PHP.HTML+CSS.JS什么的不够了,总得会点时下热门的东西,例如微信小程序,有很多企业的招聘要求上写着:"做过微信小程序的优先"."只要做过微信小程序的"...... 可见微信小程序的热门程度.话(fei)不(hua)多(ting)说(duo),开始学习. 首先在微信公众平台注册小程序账号:

  • 微信小程序学习笔记之登录API与获取用户信息操作图文详解

    本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序跳转页面.传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法. [小程序登录]wx.login() app.js: App({ onLaunch: function () { // 登录 wx.login({ success: function (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://w

  • 微信小程序学习笔记之文件上传、下载操作图文详解

    本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun

  • 微信小程序学习笔记之本地数据缓存功能详解

    本文实例讲述了微信小程序学习笔记之本地数据缓存功能.分享给大家供大家参考,具体如下: 前面介绍了微信小程序获取位置信息操作.这里再来介绍一下微信小程序的本地数据缓存功能. [将数据存储在本地缓存]wx.setStorage [读取本地缓存]wx.getStorage 以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token: login.php: <?php header("Content-type:text/html;charset=utf-8&q

  • 微信小程序学习笔记之页面配置与路由方式

    最近在学习回顾小程序的开发,将一些学习结果做个笔记.参考微信小程序官方文档:developers.weixin.qq.com/miniprogram- 一.小程序配置 1.全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. // 示例 { "pages": [ "pages/index/index", "pages/logs/index" ], &q

  • 微信小程序之高德地图多点路线规划过程示例详解

    调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程

随机推荐