小程序为什么有的方法要写在methods，有的可直接写在page里

最新推荐文章于 2023-06-15 21:55:37 发布
最新推荐文章于 2023-06-15 21:55:37 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： thinkphp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmp5023/article/details/104926593
版权

在页面中触发的函数必须写在method里，其他情况可以写在page里，组件的可以写在page里

lmp5023
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
一个基于微信小程序的迷你全局状态管理库
01-27
wxMiniStore 一个基于原生小程序的 mini 全局状态管理库，跨页面/组件数据共享渲染。 全局状态 state 支持所有 Page 和 Component，更新时使用独有 diff 能力，性能更强。 周期监听 pageListener 能监听所有页面的 onLoad、onShow 等周期事件，方便埋点、统计等行为。 全局事件 methods，一处声明，所有 wxml 直接可用的函数。 适合原生小程序，即使后期引入，也只需增加几行代码。 更新日志 1.3.1 [2021.1.13] U：优化pageListener中的onShareAppMessage能力，使其支持自定义。 1.3.0 [2020.7.28] A：新增 清除状态，by F：新增polyfill，修复 。 F：单词错误 pageLisener 改为 pageListener（已做向下兼容可放心升级）。 1.2.9
1024程序员节 | 微信小程序开发之自定义组件相关知识点整理
轻舟终过万重山
10-24 1204
微信小程序自定义组件知识整理，后期更新组件的父子通信以及组件的behaviors等知识点
微信小程序奶茶点餐系统
05-17
该资源包括后台服务及微信小程序两大服务、里面包括了首页展示、商品展示、快速下单、购物车详情、订单详情及历史购买信息；全套资源包括项目启动及调试相关资料步骤说明
按钮无法点击 Do not have xx handler in current page，去掉BOM头的方法 ...
03-29
前言 最近摩拜单车小程序需求越来越多，多人协作，甚至多个项目并行。如何合作的更顺畅，提升团队成员开发效率，这便是这段时间思考的问题。 其中很重要的一点就是，小程序功能组件化。但小程序的开发框架目前还不支持component，结合具体开发经验，我们封装了wx-component。 思想 静态模板 利用微信小程序支持的template特性，在page中使用template去调用组件，并把组件的methods提升到page的属性中去，这样便可以在component中使用bindtap等绑定组件“私有”事件方法。 component和page的互相调用 在component的私有方法或onLoad等事
github精选：摩拜单车小程序组件化解决方案wx-component
03-29
前言 最近摩拜单车小程序需求越来越多，多人协作，甚至多个项目并行。如何合作的更顺畅，提升团队成员开发效率，这便是这段时间思考的问题。 其中很重要的一点就是，小程序功能组件化。但小程序的开发框架目前还不支持component，结合具体开发经验，我们封装了wx-component。 思想 静态模板 利用微信小程序支持的template特性，在page中使用template去调用组件，并把组件的methods提升到page的属性中去，这样便可以在component中使用bindtap等绑定组件“私有”事件方法。 component和page的互相调用 在component的私有方法或onLoad等事
微信小程序 自定义组件-数据、方法、属性
qq_35262929的博客
11-09 1095
微信小程序中自定义组件的数据、方法、属性及数据监听器
小程序为什么有的方法要写在methods，有的可直接写在page下
初笑-吕旅个人博客
08-21 5545
在HTML中调用到的一些方法要写到methods下面，其余的根据实际情况都可写到page下
微信小程序 method传参 和 页面传参
weixin_43910988的博客
06-15 1808
使用 e.target.dataset.参数key 得到参数值。使用data-参数Key = '指定参数值'
微信小程序的使用教程
m0_68907098的博客
11-10 3744
微信小程序
demo-wxapp-call-component-method:微信页面(Page)调用自定义组件(Component)内部方法
05-01
这是一个微信小程序通过外部 js 方法调用小程序组件内部方法的范例。 详细说明文章： 微信小程序主要基于数据绑定来处理 js 和 wxml 之间的数据传输，虽然这样有很多便利性，但是有时候也是蛮不方便的。今天遇到调用组件方法的问题，其实非常简单，最关键是一个 selectComponent('#component-id'); 的方法问题，不想读太多文字可以读源码。 创建组件 新建一个叫做 my-component 的组件，并在组件 my-component.js 的 methods 块里增加 myFunction 方法，也就是一会儿我们想尝试用页面直接调用的方法。组件的其他内容，按照需要的逻辑自己添加就好了。 Component({ properties: { }, data: { }, methods: { myFunction:
wangyi-music-mpvue微信小程序-仿网易云音乐.zip
09-23
在尝试开发了一个微信小程序之，后发现有mpvue这么个东西可以来开发小程序以后就忍不住了，所以把小程序和我用vue开发过的版本结合修改以后，再尝试用mpvue iview-weapp开发一个版本。后台接口用的是NeteaseCloudMusicApi,感谢大佬的分享git地址，demo项目代码质量不是很好，哈哈哈哈多多见谅预览（不动点大图看）目前完成推荐歌单排行榜歌单详情播放页歌单评论搜索扫一扫(基础功能)周边(百度地图api)项目搭建最开始还是要把微信小程序开发工具下载一下mpvue项目建立，跟着官网走一遍是最快的 快速上手支持iview-weapp，还是跟着官网快速上手，这里就一个地方要注意，把下载下来的iview-weapp项目的dist文件夹（可以改名字）是放到你项目编译后的dist目录下，iview-weapp官网没有效果的展示，所以建议扫它上面的二维码查看效果以后对照它的代码进行开发最后就是用微信小程序开发工具打开项目(不是dist目录)，用你常用的编译器编写代码（src目录下）请求方面微信小程序有自带的wx.request()可以使用，还可以用Flyio，我是用的Flyio具体使用的话可以再每个模块中var Fly=require("flyio/dist/npm/wx") var fly=new Fly fly.get(url).then(res=>{})还有就是在main.js中const Fly = require('flyio/dist/npm/wx'); let fly = new Fly(); Vue.prototype.$fly = fly; //模块中使用  this.$fiy.get(url).then(res=>{})路由跳转传参wx.navigateTo({url:'../test/main?id=' id})\u7b2c\u4e00\u79cd\uff1aonShow\u00a0(options)\u00a0{\r\n\r\nlet\u00a0id\u00a0=\u00a0options.id\r\n\r\n}\u7b2c\u4e8c\u79cd\uff1a\u5728\u6240\u6709\u9875\u9762\u7ec4\u4ef6\u5185\u53ef\u4ee5\u901a\u8fc7 this.$root.$mp.query \u83b7\u53d6,\u8981\u6ce8\u610f\u5c31\u662f\uff1a\u5199\u5728mounted\u51fd\u6570\u91cc\uff0c\u5199\u5230created\u62a5\u9519\u3002\u7b2c\u4e09\u79cd\uff1a\u5728\u6240\u6709\u7684\u7ec4\u4ef6\u5185\u53ef\u4ee5\u901a\u8fc7 this.$root.$mp.appOptions\u83b7\u53d6\u3002\u6b63\u5e38\u60c5\u51b5\u4e0b\u4e09\u79cd\u5e94\u8be5\u90fd\u662f\u53ef\u4ee5\u7684\uff0c\u67d0\u4e00\u79cd\u6ca1\u7528\u7684\u65f6\u5019\u5c31\u5c1d\u8bd5\u53e6\u5916\u4e24\u79cd\u65b9\u9762\u8fd8\u662f\u548cvue\u91cc\u9762\u7684\u4f7f\u7528\u4e00\u6837\uff0c\u7b80\u5355\u7684/src/store/store.jsimport\u00a0Vue\u00a0from\u00a0'vue' import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({   state: {    oneState:'one'     }   },   mutations: {     setItem: (state,data) => {       state.oneState = data     },   },   getters : {     getItem (state) {         return state.oneState     }, });/src/main.jsimport store from './store/store' Vue.prototype.$store = store;/src/page/text.vueimport {mapGetters} from 'vuex'   export default {      computed:{        ...mapGetters([          'oneState'         ])      },      },      methods:{          test(){              this.$store.commit('setItem', 'two')          }      }总结好了，基本的开发流程就是这样，具体的开发大部分还是像vue开发那样，自己在开发的时候，遇到的坑还是有的，但网上基本都能找到解决方案，具体遇到的时候就查一查都能查到，收获很多。 最后这里还有一个用vue开发的版本可在线预览,建议用chrome的手机模式预览
uniapp微信小程序系列（2）pages.json实用配置详解
@黄小泽的个人博客
11-02 1万+
uniapp学习笔记
小程序自定义组件——创建和使用自定义组件步骤 & 自定义组件属性properties数据列表、data数据、methods方法的用法
weixin_44867717的博客
10-19 2355
小程序自定义组件——创建和使用自定义组件步骤 & 自定义组件属性properties数据列表、data数据、methods方法的用法 小程序默认提供的组件（内置组件） 如果内置组件没有提供特定功能，我们可以自己实现一个组件来完成自己的一些需求 基本用法 创建组件 组件的json配置文件必须添加属性"component": true 实现组件模板和样式 使用自定义组件（在使用自定义组件的页面中添加如下配置） { "usingComponents": { "my-he
微信小程序提示跳转页面报错，解决方法
热门推荐
dqzd12345的博客
10-28 1万+
报错提示：VM264:1 Component "pages/index/index" does not have a method "handleClick" to handle event "tap" 可能是你自己定义了组件： 我这里就是自定义了组件（Component） 那么如何自定义组件呢？ 首先在json文件中写入一下代码即可： 然后就可以用了，那么为什么跳转页面会出现错误呢...
微信小程序在双大括号{{}}里面写方法
x_XDGS的博客
02-25 2646
微信小程序在双大括号{{}}里面写方法，处理数据
微信小程序Page的应用
whose_moon的博客
07-11 1144
注册页面 一、使用Page构造器注册页面 Page({ data: { text: "This is page data." //页面的初始数据s }, onLoad: function(options) { // 生命周期回调—监听页面加载 }, onShow: function() { // 生命周期回调—监听页面显示 },
小程序自定义组件的methods的调用
michaelxuzhi___的博客
05-30 3445
自定义组件的methods的调用 今天写了一个日历组件，只显示当月的日历。在methods中用了一些方法来this.setData({})，但是不知道怎么让组件在实例化的时候自动调用方法。 后来查到组件有一套生命周期 created 组件实例化，但节点树还未导入，因此这时不能用setData attached 节点树完成，可以用setData渲染节点，但无法操作节点 ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点 moved 组件实例被移动到树的另一个位置 d
杭州电子科技大学数据结构(题目).pdf
最新发布
04-26
杭州电子科技大学，期末考试资料，计算机专业期末考试试卷，试卷及答案，数据结构。
在微信小程序中写一个新闻列表
03-26
1. 首先，需要在小程序的 app.json 文件中添加一个页面： ``` "pages": [ "pages/news/news" ], ``` 2. 创建一个 news 页面，包含一个列表和新闻项组件。在 news.wxml 文件中添加以下代码： ``` <view class="news-list"> <block wx:for="{{newsList}}" wx:key="index"> <news-item title="{{item.title}}" date="{{item.date}}" cover="{{item.cover}}" url="{{item.url}}" /> </block> </view> ``` 3. 在 news 页面的 js 文件中，定义数据和获取新闻列表的方法： ``` Page({ data: { newsList: [] // 新闻列表 }, onLoad: function () { // 获取新闻列表 wx.request({ url: 'https://api.example.com/news', success: res => { this.setData({ newsList: res.data }) } }) } }) ``` 4. 创建一个 news-item 组件，用于显示单个新闻项。在 news-item.wxml 文件中添加以下代码： ``` <view class="news-item"> <image class="news-cover" src="{{cover}}" mode="aspectFill" /> <view class="news-info"> <view class="news-title">{{title}}</view> <view class="news-date">{{date}}</view> </view> </view> ``` 5. 在 news-item 组件的 js 文件中，定义属性和点击事件： ``` Component({ properties: { title: String, date: String, cover: String, url: String }, methods: { onTap: function () { // 点击跳转到新闻详情页 wx.navigateTo({ url: '/pages/news/detail?url=' + encodeURIComponent(this.data.url) }) } } }) ``` 6. 创建一个 news-detail 页面，用于显示新闻详情。在 news-detail 页面的 js 文件中，获取 url 参数并在页面中显示新闻内容： ``` Page({ data: { content: '' // 新闻内容 }, onLoad: function (options) { // 获取新闻内容 wx.request({ url: decodeURIComponent(options.url), success: res => { this.setData({ content: res.data }) } }) } }) ``` 以上就是一个简单的微信小程序新闻列表的实现。需要注意的是，实际开发中需要处理一些异常情况，例如请求失败、没有数据等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值