微信小程序开发文档

在此只做云开发简单使用的总结，深入使用，请参考官方文档 创建小程序和代码结构 目录结构 AppID在微信公众平台，在左边的开发中开发设置里有 小程序云开发基本结构： 1.cloudfunctions：指定腾讯云项目的目录 2.miniprogarm：小程序端的代码 3.project.config.json：对小程序项目的配置 配置JSON文件 project.config.json 对一个项目的整体配置 app.json:项目的全局配置 pages项：对应的是一个数组，小程序有几个界面就配置几个 window项：对TopBar窗口的配置 tabBar项:底部通栏，一般需要自己添加，与window是同级，tabBar中list数组中的每一个对象代表tabBar中的每一个Tab WXML 与html类似，但是WXML中定义了一些自己的组件 WXSS 新定义像素单位rpx，规定不管屏幕大小,都为750rpx。使用rpx，能够实现手机端自适应布局 在WXSS中如何引用公共样式：@import '相对路径' 第三方样式库推荐： WeUI ，iView ，Vant （后两者包含了pc端的组件） JS 给data中的值赋值的时候，必须用this.setData({ count : this.data.count +1 }) 微信小程序里的点击事件由bind ， catch来绑定，bindtap

大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？ 解决方案 wxParse 小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。 rich-text 后来，小程序增加了「rich-text」组件用于展示富文本内容。然而，这个组件存在一个极大的限制： 组件内屏蔽了所有节点的事件 。也就是说，在该组件内，连「预览图片」这样一个简单的功能都无法实现。 web-view 再后来，小程序允许通过「web-view」组件嵌套网页，通过网页展示HTML内容是兼容性最好的解决方案了。然而，因为要多加载一个页面，性能是较差的。 当「WePY」遇上「wxParse」 基于用户体验和功能交互上的考虑，我们抛弃了「rich-text」和「web-view」这两个原生组件，选择了「wxParse」。然而，用着用着却发现，「wxParse」也不能很好地满足需要： 我们的小程序是基于「WePY」框架开发的，而「wxParse」是基于原生的小程序编写的。要想让两者兼容，必须修改「wxParse」的源代码。 「wxParse

Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13   Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 你们的 star 是我学习的动力！ GitHub 地址 写在前面  首个微信小程序实践记录:  工作量: PSD 18 张 (导出的 JPG 30 张)  耗时：12 个工作日  总结1: 在页面制作商，需要 3 周工作日（工作 15 天）搞定，前后端对接口另计。实际上，12 个工作日可以搞定所有页面，但是应该往前铺 1.5D 熟悉框架，往后铺 1.5D 整理代码。当然每个人的耗时可能不同，可根据个人实际情况进行调整。  总结2：在 API 调用上，根据接口数量可能需要 7-12 个工作日进行 API 调用，难点表现在： 1. 接口不够丰富，数据量不足； 2. 接口数据不够正式真实，跟前面的假数据相差太大； 3. 接口可能没法正常调用 等原因。故因根据小程序业务逻辑进行工作时长的报备。   这里有 jsliang 微信小程序开发中遇到的所有坑，以及在填坑过程中的一些个人经验。jsliang 利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。它可能教不了你什么，但至少能省下你百度的功夫。   请结合 《目录》 和 《返回目录》 来进行跳转

微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组件示例,欢迎 Star 演示图片 快速上手 在开始使用 Wuss Weapp 之前，你需要先阅读 微信小程序自定义组件 的相关文档。 如何使用 方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块) 通过使用shell命令或git定位到当前小程序开发目录，然后使用npm或者yarn安装依赖。 npm init && npm install --production wuss-weapp 或者 yarn init && yarn add --production wuss-weapp 当依赖安装完成后即可在微信小程序开发者工具里点击 [工具] => [构建npm]，此时若出现弹窗则记得吧 “使用npm模块” 勾上，若无弹窗则待构建完成后在详情里面手动勾上 “使用npm模块”。 构建完成后即可添加需要的组件。在页面的 json 中配置： "usingComponents": { "w-button": "wuss-weapp/w-button/index", "w-toast": "wuss-weapp/w-toast/index",

啦啦啦啦啦啦啦,好开心 没学懂 还在搞昨天的 快一点了 写不完明天咋办呀!好开心 wx.request 　　首先,我不多bb 先去开发文档看看哈 写的必定比我的好 官方文档 　　他其实就相当于我们的ajax 指定的参数就 url data method header datatype(返回的数据格式) success 　　废话不说了 我就直接上代码了 req:function(){ wx.request({ url: '127.0.0.1:8000/get/', method:'POST', data:{ 's':'x' }, header:{'content-type':'application/json'}, success(res){ console.log(res) } }) } 　　ok 你已经学完了 快速的和你吹下路由跳转 路由跳转 　　wx.switchTab() 　　跳转到tabBar页面, 并关闭其他非tabBar页面 　　参数 url success(调用成功) fail(调用失败) complete(无论调用结束的回调函数都会执行) 　　wx.redirectTo() 　　该方法 关闭当前页面, 跳转到应用内的某个页面, 但是不允许跳到tabBar页面 　　参数 url(改路径可以带参数 使用 option.query取值) success(调用成功)

作者介绍：周中坚，美团点评工程师，4年 Web 前端开发经验，主要负责过会员卡、外卖、预订、商家平台等业务的前端开发，现在是美团点评点餐团队的一员。 如果你看过《 张小龙首次全面阐述小程序 》这篇文章，一定会对这句话有印象："比如我们到一个餐馆，我们可能想排队或者说点一下菜，我们并不需要去下载这个餐馆的应用程序，我们只需要在餐馆扫一下它的二维码，然后就启动了这个餐馆的小程序，我们可以立即在小程序里排队或者点餐。" 没错，我们就是做张小龙在演讲时提到的"点餐"的大众点评点餐团队。我们团队在去年年底开始考虑微信小程序平台，经过快速而慎重的前期调研和讨论，紧张的开发测试，在微信同事的帮助下，"大众点评点餐"小程序于2017年1月上线。 如果你对小程序感兴趣，不妨关注一下这个专栏，我们计划在两个月内推出7篇关于小程序的专栏文章。小程序的这一系列文章是我们前端团队做小程序时积累的经验，里面不仅有小程序的原理，还有我们开发过程中遇到的问题和解决办法。 如果你对前端感兴趣，也不妨关注一下这个专栏，因为小程序只是我们团队很小的一部分产出，我们会持续创作，将我们的经验和大家分享。 功能简介 大众点评点餐小程序是一个工具，本着方便好用的初衷，我们设计的第一版的「大众点评点餐」小程序交互流程非常简单，用户可以在小程序中完成选择菜品，确认下单，追踪订单状态这个完整的点餐流程。 菜单页 购物车页 订单详情页

本文转载于: 猿2048 网站➦ https://www.mk2048.com/blog/blog.php?id=hc20h1cbaa 引言 现在的前端有各种各样的新知识和新框架，小程序才出生几年，就已经火到这种程度了，所以作为前端学习者，这个新技能我们是一定要尽快get到的。学习小程序最好的方法就是自己手写一个小程序，能从中找到自己的不足之处。于是我便萌发了一个新想法，自己手撸一个拉勾小程序。刚开始的时候，起步是有点难的，不知道怎么把学的东西转化成自己想要写的东西，但谢了一点后，感觉有点入迷了，停不下来。希望我写的东西能够帮助社区的学习者，如果写的不好，也欢迎你指正。 开发工具与资源平台 微信web开发者工具 ：用于敲网页代码，但是最主要用来进行手机效果预览。 VsCode :主要用于布局排版，也是敲代码的主战场，真心觉得这个编辑器不错，快捷输入和排版，大大提高了开发效率，使用简单，一学就会。 Iconfont-阿里巴巴矢量图标库 ：提供项目中的所有图标，资源丰富。 微信小程序开发者文档 :微信小程序开发的文档，资源库，以及API规范 Easy Mock : 可以模拟我们想要的数据，非常方便。这里是部分数据 预览图片 功能展示 数据请求 拉勾里面有非常多的数据，所以我在easy mock里面创建了很多接口，在页面需要用到的时候去 请求数据，如果每一次都要用wx.request

本文转载于: 猿2048 网站➫ https://www.mk2048.com/blog/blog.php?id=h0j0k2ijib 前言 随着wepy和mpvue的出现及流行，开发小程序变的越来越便捷和强大，作为基佬社区的一份子，我们都需要把自己遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。如有写的不足的地方，请各位提出宝贵的建议哈。 简单介绍微信小程序 众所周知，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题，因此它的开发程度也较为简单。 开发技术： WXML（HTML5）、WXSS（CSS）、JavaScript 开发工具： vscode(可以使用下列几种框架来进行开发)，微信开发者工具 开发思路： MVVM，简单来说，这就是一门把前端开发者从操作DOM的繁琐步骤中解脱出来，让数据自动更新界面的技术。 开发流程： 这个大家可以看官方的文档，下载安装开发工具以后使用appid就可以进行开发了。 小程序简易教程 开发单位： rpx,pt,rem等，具体在这里就不介绍了 开发框架： 这里介绍几种小程序的框架，有weui,wepy,mpvue等，有兴趣的同学可以自主去了解一下 作为一枚前端战场的工兵，自然少不了踩雷

一、注册： 微信小程序账号注册：登录 https://mp.weixin.qq.com 注册完成后，下载微信小程序开发者工具： 依次点击：“首页”->“文档”->“工具”，页面中第一行有“微信开发者工具”，点击安装 点击安装 配置：打开微信开发者工具，点击左上角“设置”->”外观设置”，可以设置软件外观 比如，我把颜色设置为深色 二、Pages： 新建pages: 一键创建：在app.json中的“pages”中加上“pages/文件夹名称/文件名称”。 删除文件：在文件名上右击，然后点击“硬盘打开”，就可以在根目录删除该文件。 编写和访问页面：在about.wxml中写”i am gaocailei”，在app.json中把pages移到第一行，保存，点击模拟器页面出现 三、Windows： “首页”->“文档”->“框架”->“（左侧）小程序配置”->“全局配置”->“Windows”。 我增加了下拉刷新功能; "backgroundTextStyle": "dark", "enablePullDownRefresh":true 四、tabBar(底部菜单)： 在配置示例找到tabBar的代码： "tabBar": { 可以选择性的自行配置，比如我要为首页和日志添加图片，我就可以选择“iconPath （图片路径）”，“selectedIconPath（选中时的图片路径）”

微信小程序如何横屏 从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中配置 "pageOrientation": "auto" 。 微信小程序开发文档 PS：1、以这种方式实现小程序屏幕旋转，需要用户关闭手机上的“屏幕锁定”选项 PS：2、由于开启横屏需要修改json文件的配置，而这个文件我们无法在程序运行中进行修改，故我们无法通过点击按钮或其他操作去使手机屏幕发生旋转，只是是设置为 "pageOrientation": "auto" 用户主动旋转手机触发 PS：3、我们可以在进入某一个页面的时候，固定屏幕横屏展示，设置 "pageOrientation": "landscape " 如何获取当前屏幕状态 使用 selectorQuery.selectViewport 可以获取到当前的屏幕状态。这种方式比较麻烦，这里介绍一种使用 wx.onWindowResize 进行监听的方式。 onShow ( ) { let that = this ; wx . onWindowResize ( function ( res ) { if ( res . deviceOrientation ===