精华内容
下载资源
问答
  • 小程序Page页面详解

    千次阅读 2017-09-12 20:27:18
    小程序

    在index.js文件中创建一个Page函数用来注册页面,接受一个Object参数,包括:

    data(Object)            //页面初始化数据
    onLoad(Fuction)         //生命周期函数--监听页面加载
    onReady(Fuction)        //生命周期函数--监听页面初次渲染完成
    onShow(Fuction)         //生命周期函数--监听页面显示
    onHide(Fuction)         //生命周期函数--监听页面隐藏
    onUnload(Fuction)       //生命周期函数--监听页面卸载
    onPullDownRefresh(Fuction)  //页面相关事件处理函数--监听用户下拉动作
    onReachBottom(Fuction)      //页面上拉触底事件的处理函数
    onShareAppMessage(Fuction)  //用户点击右上角转发
    onPageScroll(Fuction)       //页面滚动触发事件的处理函数
    其他(Any)                   //开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问

    初始化数据Data

    初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。简单的来讲就是所用数据的定义和初始化。
    渲染层可以通过 WXML 对数据进行绑定。即在Data中定义的数据需要通过wxml文件进行框架的连接。
    eg:
    wxml

    <view class="can_box">
        <button type="{{button_type}}" size="default" bindtap="can_str">{{button_text}}</button>
    </view>

    js

        data:{
            button_text:'连接设备',
        },

    生命周期函数

    • onLoad,onShow函数
      初始化,只调用一次,为小程序运行时打开的第一个页面。

    • onReady函数
      一个页面只会调用一次,表示该页面初次渲染完成,可以与视图层交互

    • onHide函数
      页面隐藏,调用 API wx.navigateTo 或使用组件 < navigator open-type=”navigateTo”/ >时打开新页面

    • onUnload函数
      页面重定向:调用 API wx.redirectTo 或使用组件 < navigator open-type=”redirectTo”/ >
      页面返回:调用 API wx.navigateBack 或使用组件< navigator open-type=”navigateBack”>或用户按左上角返回按钮
      重启动:调用 API wx.reLaunch 或使用组件 < navigator open-type=”reLaunch”/>

    事件处理函数

    在wxml中添加事件绑定,如果触发该事件则执行此函数
    eg:
    wxml

        <view class="control_link">
            <button bindtap="steps_control">读取步数</button>
        </view>

    js

        steps_control:function(){
            var that = this;
            var steps_data = that.data.steps_data;
    //读取数据
            wx.readBLECharacteristicValue({
                deviceId: that.data.devices_data.deviceId,
                serviceId: steps_data.service.uuid,
                characteristicId: steps_data.characteristic.uuid,
                success: function(res){
                    console.log('读取步数', res);
                    that.setData({
                        steps_data_count:"..."
                    });
                }
            });
        },

    Page.prototype.setData()
    setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

    setData()参数:data(Object),callback(Function).
    object 以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。 callback 是一个回调函数,在这次setData对界面渲染完毕后调用。
    其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

    注意:

    1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
    2. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

    wxml

        <view class="control_link">
            <button bindtap="steps_control">读取步数</button>
        </view>

    js

        steps_control:function(){
            var that = this;
            var steps_data = that.data.steps_data;
    //读取数据
            wx.readBLECharacteristicValue({
                deviceId: that.data.devices_data.deviceId,
                serviceId: steps_data.service.uuid,
                characteristicId: steps_data.characteristic.uuid,
                success: function(res){
                    console.log('读取步数', res);
                    that.setData({
                        steps_data_count:"..."
                    });
                }
            });
        },
    展开全文
  • 微信小程序动态修改page的页面样式

    千次阅读 2020-11-03 18:52:35
    微信小程序修改页面的样式的方法: 在wxss页面中直接修改page的样式 这样修改page的样式是静态的 page { background: #F5F5F7; } 通过模拟page动态的修改page标签的样式 wxml中: <view class="page" style...

    微信小程序修改页面的样式的方法:

    1. 在wxss页面中直接修改page的样式
      这样修改page的样式是静态的
    page {
        background: #F5F5F7;
    }
    
    1. 通过模拟page动态的修改page标签的样式
      wxml中:
    <view class="page" style="background-color:{{pageBackgroundColor}}"></view>
    

    wxss中:
    设置自定义page的样式,使之与原生page标签一样

    page {
        display: block;
        min-height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    

    js中:

    Page({
        /**
         * 页面的初始数据
         */
        data: {
        	curriculumCommentList: [],
        	// 页面背景色
            pageBackgroundColor: '#F5F5F7'
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
        	// 根据数组的长度 修改页面的背景色
            this.pageBgColor();
        },
        // 页面的背景色
        pageBgColor() {
            if (this.data.curriculumCommentList.length == 0) {
                this.setData({
                    pageBackgroundColor: '#ffffff'
                });
            }
        }
    })
    
    展开全文
  • 微信小程序中的Page

    万次阅读 2018-03-30 23:41:05
    微信小程序中的PagePage()定义在js文件中,Page() 函数用来注册一个页面。Page()函数接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。object参数为:怎么理解Page()函数接受一个 object...

    微信小程序中的Page


    Page()定义在js文件中,Page() 函数用来注册一个页面。

    Page()函数接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

    object参数为:



    怎么理解Page()函数接受一个 object 参数??

    形如:Page({data,onLoad,onReady,...}),其中data,onLoad,onReady都是page的参数。


    举个例子,比如,可以这样写:

    Page({ 
      data: {    text: "This is page data."  },  onLoad: function(options) {},  onReady: function() {},  onShow: function() {},
      onHide: function() {},  onUnload: function() {},  onPullDownRefresh: function() {}
    })
    

    变换为如下形式,也可以:

    Page({
      data: {    text: "This is page data."  },
      onLoad: function(options) {},
      onReady: function() {},
      onShow: function() {},
      onHide: function() {},
      onUnload: function() {},
      onPullDownRefresh: function() {}
    })

    最后,(最美观):

    //index.js
    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        // Do some initialize when page load.
      },
      onReady: function() {
        // Do something when page ready.
      },
      onShow: function() {
        // Do something when page show.
      },
      onHide: function() {
        // Do something when page hide.
      },
      onUnload: function() {
        // Do something when page close.
      },
      onPullDownRefresh: function() {
        // Do something when pull down.
      },
      onReachBottom: function() {
        // Do something when page reach bottom.
      },
      onShareAppMessage: function () {
       // return custom share data when user share.
      },
      onPageScroll: function() {
        // Do something when page scroll
      }
    })

    也就是在js里的代码形式。


    初始化数据

    页面中的data数据会以JSON的形式由逻辑层(js)到渲染层。所以,数据组织形式能转换为JSON格式。如,字符串,数字,布尔值,对象,数组。

    示例代码:

    <view>{{text}}</view>
    <view>{{array[0].msg}}</view>
    <-- js -->
    Page({
      data: {
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
      }
    })


    页面生命周期函数

    (1)onLoad

    页面加载,一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。

    onLoad的参数为object:



    (2)onShow

    页面显示,每次打开页面都会显示

    (3)onReady

    页面初次渲染完成, 一个页面只会调用一次,可以和视图层进行交互。

    (4)onHide

    页面隐藏,tab切换时。

    (5)onUnload

    页面卸载。


    页面相关事件处理函数

    (1)onPullDownRefresh:下拉刷新

    说明:监听用户下拉刷新事件

    监听用户下拉刷新事件。

    需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

    当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。


    (2)onReachBottom:上拉触底

    监听用户上拉触底事件。
    可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。

    在触发距离内滑动期间,本事件只会被触发一次。


    (3)onPageScroll: 页面滚动

    监听用户滑动页面事件。
    参数为 Object,包含以下字段:



    (4)onShareAppMessage: 用户转发

    只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

    用户点击转发按钮的时候会调用

    此事件需要 return 一个 Object,用于自定义转发内容

    自定义转发内容:


    实例代码:

    Page({
      onShareAppMessage: function () {
        return {
          title: '自定义转发标题',
          path: '/page/user?id=123'
        }
      }
    })


    事件处理函数:(页面点击,js执行逻辑)

    简单来说,就是你在页面上操作,页面对你的操作有回应。

    <view bindtap="viewTap"> click me </view>
    Page({
      viewTap: function() {
        console.log('view tap')
      }
    })


    参数

    Page.prototype.route

    route 字段可以获取到当前页面的路径。


    Page.prototype.setData()

    setData 函数(异步模式)将数据从逻辑层(JS)发送到视图层(WXML),同时(同步,或立刻)改变对应的 this.data 的值。


    setData()参数:

    说明:

    (1)object 以 key,value 的形式表示将 this.data 中的 value赋值给key(也即key=value)。

    说明: key 可以以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

    (2)callback 是一个回调函数(非必须有),在这次setData对界面渲染完毕后调用。


    实例代码:

    <!--index.wxml-->
    <view>{{text}}</view>        //1
    <button bindtap="changeText"> Change normal data </button>
    <view>{{num}}</view>            //2
    <button bindtap="changeNum"> Change normal num </button>
    <view>{{array[0].text}}</view>        //3
    <button bindtap="changeItemInArray"> Change Array data </button>
    <view>{{object.text}}</view>                //4
    <button bindtap="changeItemInObject"> Change Object data </button>
    <view>{{newField.text}}</view>                //5
    <button bindtap="addNewField"> Add new data </button>
    


    //index.js
    Page({
      data: {
        text: 'init data',        //1
        num: 0,                        //2
        array: [{text: 'init data'}],        //3
        object: {
          text: 'init data'                        //4
        }
      },
      changeText: function() {
        // this.data.text = 'changed data'  // bad, it can not work
        this.setData({
          text: 'changed data'
        })
      },
      changeNum: function() {
        this.data.num = 1
        this.setData({
          num: this.data.num
        })
      },
      changeItemInArray: function() {
        // you can use this way to modify a danamic data path
        this.setData({
          'array[0].text':'changed data'
        })
      },
      changeItemInObject: function(){
        this.setData({
          'object.text': 'changed data'
        });
      },
      addNewField: function() {
        this.setData({
          'newField.text': 'new data'                //5
        })
      }
    })

    注意:
    (1) 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。(最好调用setData)
    (2) 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。 (数据不要太大了)
    (3) 请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。(不要undefined)



    展开全文
  • 微信小程序系列3(新建page小技巧)

    千次阅读 2017-04-21 18:08:07
    由于一个项目会有很多的页面,并且微信小程序建一个一面又需要有4个对应文件,所以这里我会讲到一个小技巧,怎么快速新建page. 在app.json全局配置的路由pages里面直接添加你要新加的page路径,如 “pages/set/set”,...

    由于一个项目会有很多的页面,并且微信小程序建一个一面又需要有4个对应文件,所以这里我会讲到一个小技巧,怎么快速新建page.
    在app.json全局配置的路由pages里面直接添加你要新加的page路径,如 “pages/set/set”,然后Ctrl+s保存一下,就会看到小程序目录中新增了set目录,同时也包括相应的文件,如图
    这里写图片描述

    展开全文
  • 微信小程序-Page生命周期

    万次阅读 2018-05-25 15:11:32
    QQ讨论群:785071190微信小程序开发之前我们还需...Page第一次创建的小程序项目,可以看到有index.js和logs.js两个文件,其中的文件内容结构包含了一个Page()的函数。Page() 函数用来注册一个页面。接受一个 object ...
  • 小程序App()和Page()函数

    千次阅读 2018-12-13 11:23:07
    小程序启动的时候调用,并创建小程序,直到销毁。在整个小程序的生命周期过程中,它都是存在的。很显然它是单例的,全局的。所以, 1)只能在app.js中注册一次。 2)在代码的任何地方都可以通过 getApp() 获取...
  • 钉钉小程序Page文件介绍

    千次阅读 2020-04-23 10:35:24
    Page代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来生成页面实例。 1.数据渲染 页面初始化时,需要提供数据作为页面的第一次...
  • 微信小程序中调用page中自定义的函数如下所示,在函数中如果不加this的话控制台会报错:this.initalEncryptedInput(); onLoad:function(){ this.initalEncryptedInput(); }Page({ data: { encryption: "...
  • 【微信小程序Page()函数详解

    千次阅读 2019-03-04 11:24:21
    在开发微信小程序的时候遇到函数,或者不明白的地方,最好上官网查询相应的知识,这里小编帮大家整理了下page()常用函数的用法。 Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命...
  • 小程序设置page背景图片透明度

    千次阅读 2019-05-11 11:30:46
    小程序设置page背景图片透明度: css代码: page{ width:100%; height:100%; } .main{ width:100%; height:100%; opacity: 0.5; background-repeat: round; background-size: contain; } .main::b...
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    小程序是一种新的开放能力,开发者可以快速地开发一个小程序小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小程序就是微信中非常小巧的程序(这不废话......),我们打开...
  • 小程序网络请求默认为异步请求,在appjs的onLaunch运行后进行异步请求时,程序不会停止,Page页已执行onload, 我们希望onLaunch执行完后再执行onload。 解决方法:定义回调函数 //app.js App({ onLaunch: ...
  • 因为小程序跳转的时候需要公众号关联,但是关联的数量是有限的!因此该文章的处理方案是: a.关联的小程序,直接可以点击打开 b.没有关联的,那么可以长按识别小程序码来进入小程序 下面展示效果: 1.点击关联有...
  • 重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息 ...目前小程序已经支持分享到朋友圈, 只有安卓机好使。 体验地址:扫码进入小程序 ---- 点击右上角三个点 1.先看案例 2.微信开发文档: ...
  • 微信小程序page页面下有多余空白区域(解决方法)
  • 小程序跳转到其他小程序

    万次阅读 2019-01-17 10:55:02
    我记得在之前的几个月小程序跳转必须是同一主体(同一公众号),但是现在不用了!!可以随便跳转 了!! 一、使用限制 1.需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法...
  • 小程序从入门到快速开发小程序项目

    万次阅读 多人点赞 2018-08-19 21:39:39
    备注:小程序只是突发灵感兴趣弄的,并非专业研究小程序,其实小程序API并不多,不复杂,扩展无非就是JS了。 最近用了大概两天左右的时间看了小程序的官方文档:https://mp.weixin.qq.com/cgi-bin/wx 然后有目标的...
  • 小程序初始化: 首先触发App里的onLaunch ...小程序网络请求默认为异步请求,在appjs的onLaunch运行后进行异步请求时,程序不会停止,Page页已执行onload, 我们希望onLaunch执行完后再执行onload。 目标: onL...
  • 在上一篇《微信小程序实现类似Vue的全局路由,实现日志记录》中,通过重写wx.navigateTo,wx.switchTab,wx.navigateBack这三个方法实现类似全局路由的功能,但重写这三个方法后仍有一些局限性,无法拦截底部tab的...
  • 微信小程序开发 :目录无法自动生成page文件 解决方法:在左侧目录处右键-新建目录-(在新建成功的文件夹中)右键-新建page 就可以啦
  • 支付宝小程序、百度小程序、微信小程序、今日头条小程序四大小程序对比分析,BAT小程序技术分析
  • 微信小程序 page.js 函数调用 this that
  • Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理...Page({ data: { text: "This is page data.", sliderOffset: 0,  sliderLeft: 0,  state:{  genre:[],  ge
  • 今天尝试着做小程序,官方demo报错,出现脚本错误或者未正确调用 Page()摸索半天 解决办法page 编译错误 出现脚本错误或者未正确调用 Page() 解决办法//在页面当中的.js文件里面加上 Page({})
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • 微信小程序获取Page的各部分高度

    千次阅读 2019-09-11 11:40:08
    微信小程序获取Page的各部分高度 getPageHeight(){ let systemInfo = wx.getSystemInfoSync() // px转换到rpx的比例 let pxToRpxScale = 750 / systemInfo.windowWidth; // 状态栏的高度 let ktxSta...
  • 微信小程序 生成Page的小技巧

    千次阅读 2018-11-19 15:40:28
    比如我们要展示一个详情页数据,那么首先一般在Page下新建一个detail文件夹,然后床detail.js,.detailwxml,detail.json,detail.wxss四个文件,是不是很麻烦,其实你可以在app.json文件中写你要生成的路径 编译后会自动...
  • 請問如何實現 禁止下拉 橡皮筋功能 不要是全禁止的那種因為下面要做事件 麻煩拜託 "enablePullDownRefresh": false 不行 試過了 一樣可以下拉 說清楚點看圖片!... 各位大佬 這個我已經試過了 無法實現 我要的是...
  • 今天开发小程序的时候,遇到了这么一堆坑,百度了好久没有原因。 最终找到了原因是因为如果你的页面没有充满屏幕是不会触发这个函数的! 所以最好的办法就是把最外层的view的height属性设置为100%! 成功解决!.....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 382,480
精华内容 152,992
关键字:

page小程序