资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/微信小程序开发-个人总结

微信小程序开发-个人总结

philadelphia / 1258人阅读

微信小程序开发总结 
</>复制代码 
  1. 基础的配置及视图层、逻辑层自己看文档  [微信小程序文档][1]
  2. 这里只说一下自己的经验总结
提醒 
</>复制代码 
  1. 微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象
</>复制代码 
  1. 每一个页面路径最多五层
</>复制代码 
  1. eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的）
  2. 注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮
</>复制代码 
  1. 没有外链，只能用app.json里配置的路由，a标签编译时会自动过滤掉
</>复制代码 
  1. wx:for循环渲染时，要添加wx:key，否则报警告
</>复制代码 
  1. 使用做x轴滚动时，要设置height属性，否则开发工具买账，手机可不惯着你
</>复制代码 
  1. 给视图绑定数据时，只有事件绑定、wx:key、wx:for-index、wx:for-item，直接绑定，不需要{{}}，其它绑定都要在{{}}里绑定
</>复制代码 
  1. app.json里的pages，最好是按照，层级顺序进行配置，要不然可能不会跳转
</>复制代码 
  1. 使用touchstart、touchend时，最好不要阻止冒泡，会影响子级的tap事件，touchmove最好阻止冒泡，防止影响父级scroll-view
</>复制代码 
  1. 使用input时，最好在bindinput中动态设置value，否则安卓真机会出问题
视图元素单位 
</>复制代码 
  1. 设计时最好让ui做成750px，开发中，ui是多少px，你写成多少rpx就OK了，原理，自己查文档去
页面传参 
</>复制代码 
  2. Page({
  3.     onLoad (opositions) {
  4.         // 看看是不是你想要的
  5.         console.log(opositions.id)
  6.     }
  7. })
视图响应 
</>复制代码 
  1. 每个页面都有一个Page实例，响应就是该实例的setData方法触发的，
  2. *直接给绑定数据赋值，数据会改变，但是视图不会渲染
  3. js文件
  4.     let config = {
  5.         data: {}
  6.     }
  7.     Page(config)
事件绑定 
</>复制代码 
  1. wxml文件
  2.     
  3. js文件
  4.     let config = {
  5.         data: {},
  6.         tapHandler () {
  7.             console.log("i am a handler")
  8.         }
  9.     }

bindtap的绑定最终会解析成方法名，所以bindtap=“tapHandler(参数)”，是会报错的，----没有找到‘tapHandler(参数)’这个方法，
好在，执行事件绑定函数时，会给它传递一个参数，参数里能取到，id、data-set，可以用他们俩绑定属性，不要企图找name、class等属性，没用的，没有

公用组件

组件分三个文件，wxml、js、css

</>复制代码 
  1. wxml文件定义template模版，页面里以import方式引入，这样能控制传入模版的数据
</>复制代码 
  1. js文件exports一个对象，页面里以require方式引入，并且合并到Page实例化的配置对象中
  2.     let tempateConfig = require("url")
  3.     let mergeConfig = require("url/wxTools.js")["mergeConfig"]
  4.     let config = {
  5.         data: {}
  6.     }
  7.     config = mergeConfig(config, templateConfig)
  8.     Page(config)

mergeConfig是自己定义的简单的对象合并函数，支持多层，多对象合并
Object.assign()方法在安卓真机上运行报错，不能用

</>复制代码 
  1. wxTools.js
  2.     
  3.     function merge (con, mcon) {
  4.         for (var key in mcon) {
  5.             if (typeof mcon[key] == "object" && con[key]) {
  6.                 merge(con[key], mcon[key])
  7.             } else {
  8.                 con[key] = mcon[key]
  9.             }
  10.         }
  11.     
  12.         return con
  13.     }
  14.     
  15.     function mergeConfig () {
  16.         let config = {}
  17.         for (var i = 0, len = arguments.length; i < len; i++) {
  18.             config = merge(config, arguments[i])
  19.         }
  20.         return config
  21.     }
  22.     
  23.     module.exports = {
  24.         mergeConfig: mergeConfig
  25.     }
</>复制代码 
  1. css文件以@import方式导入
开发技巧

1.锚点
的url只能是app.json里配置的路由，只支持查询字符串，不支持hash，所以不能通过链接做锚点了。
还好微信提供了,实现如下：

</>复制代码 
  1. wxml文件
  2.     
  3.         
  4.         
  5.     
  6.     
  7.         
  8.         
  9.     
  10. js文件
  11.     Page({
  12.         data: {
  13.             toView: "hash1"
  14.         },
  15.         goHash (e) {
  16.             let hash = e.currentTarget.dataset.hash
  17.             this.setData({
  18.                 toView: hash
  19.             })
  20.         }
  21.     })

但是这是单向的，只能点击按钮，跳转锚点，屏幕滑动到相应锚点，toView属性不会相应改变，当然，如果你能通过bindscroll事件动态取到的相关数据，并且最终能把toView计算出来，就另说了，但不要想操作dom获取元素宽高什么的，对不起，微信的dom卖完了，没有

2.滚动加载
微信没有document、window对象，所以没有onscroll给你用，那怎么办呢？
还好微信提供了,实现如下：

</>复制代码 
  1. wxml文件
  2.     
  3.         
  4.             {{item.name}}
  5.         
  6.     
  7. js文件
  8.     Page({
  9.         data: {
  10.             movies: []
  11.         },
  12.         getMovies () {
  13.             let _self = this
  14.             wx.request({
  15.               url: "https://......",
  16.               data: {},
  17.               success: function(res) {
  18.                 // res.data才是你后端返回的真实数据
  19.                 _self.setData({
  20.                     movies: res.data
  21.                 })
  22.               }
  23.             })
  24.         },
  25.         loadMovies () {
  26.             // 得到要更新的数据，setData重置movies
  27.         }
  28.     })

可以做懒加载，也可以做预加载，具体逻辑自己想吧

暂时就这些啦。。。最后抱怨一句，咋就不支持外链呢，引共用组件咋那么麻烦呢

GPU云服务器 云服务器 小程序开发个人 微信小程序开发 个人的小程序开发 微信小程序开发语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50288.html

相关文章

  • 微信小程序开发-个人总结

    微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象 每一个页面路径最多五层 eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的） 注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮...

    FrancisSoung 评论0 收藏0

  • 微信小程序开发-个人总结

    微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象 每一个页面路径最多五层 eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的） 注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮...

    derek_334892 评论0 收藏0

  • Java 初学者做的第一个微信小程序总结--关于Java基础

    摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点； 也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。 但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。 项目展示 本...

    mudiyouyou 评论0 收藏0

  • 微信小程序开发踩坑总结（持续完善中）

    摘要：由于个人技术水平有限，在问题描述，解决方案中存在的问题，希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序，跟随自己开发过程中的问题出现时间而定。。微信小程序数据页面数据传递总结 由于个人技术水平有限，在问题描述，解决方案中存在的问题，希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序，跟随自己开发过程中的问题出现...

    tianhang 评论0 收藏0

发表评论

登陆后可评论

0条评论

philadelphia

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<