微信小程序开发文档

本文转载于: 猿2048 网站➮ https://www.mk2048.com/blog/blog.php?id=c1ccbhj0j Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-10-22 09:58:07   Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 你们的 star 是我学习的动力！ GitHub 地址  GitHub 最新更新：2018-10-17 13:34:11。追求最新文章的小伙伴可前往下载，掘金上的文章每周六、日更新。 写在前面  首个微信小程序实践记录:  工作量: PSD 18 张 (导出的 JPG 30 张)  耗时：12 个工作日  总结1: 在页面制作商，需要 3 周工作日（工作 15 天）搞定，前后端对接口另计。实际上，12 个工作日可以搞定所有页面，但是应该往前铺 1.5D 熟悉框架，往后铺 1.5D 整理代码。当然每个人的耗时可能不同，可根据个人实际情况进行调整。  总结2：在 API 调用上，根据接口数量可能需要 7-12 个工作日进行 API 调用，难点表现在： 1. 接口不够丰富，数据量不足； 2. 接口数据不够正式真实，跟前面的假数据相差太大； 3. 接口可能没法正常调用 等原因。故因根据小程序业务逻辑进行工作时长的报备。   这里有

学习微信小程序组件之后，一直都是使用别人的组件开发的，刚看到一篇文章讲解微信小程序自定义组件通俗易懂的开发案例觉得一看就会自己写组件了，真的很棒，感谢原作者的 手把手教你实现微信小程序中的自定义组件 ，自己也添加了一些修改（修改部分样式，添加是否显示“取消”按钮功能，添加弹窗淡入淡出动画，初始化组件赋值操作等一些简单的东西和注释化流程提示）。 主要是敲一遍代码学习之后才体会到原理是这样子的嘛，光看文档是看得懂，跟自己做出来真的是两码事。 （一）效果展示 1.默认效果： 事件触发流程说明： console中显示 2.去掉“取消”按钮效果： github下载源码 （二）实现流程 创建子组件页面： 1、新建一个页面如：components文件夹下的Dailog文件夹下的dialog，注意：该页面不需要app.json的（声明的话会报： 无效的 pageJSON(components/Dialog/dialog)["component"] ）， dialog.json 记得设置： "component": true, // 自定义组件声明 { "component" : true , // 自定义组件声明 "usingComponents" : { } //引用其他的组件 } 2、编写wxml/wxss页面代码（跟正常pages页面代码一样）； <!--components/Dialog

由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </view> <block wx:for="{{listData}}" wx:key="{{code}}"> <view class="tr bg-g" wx:if="{{index % 2 == 0}}"> <view class="td">{{item.code}}</view> <view class="td">{{item.text}}</view> <view class="td">{{item.type}}</view> </view> <view class="tr" wx:else> <view class="td">{{item.code}}</view> <view class="td">{{item.text}}</view> <view class="td">{{item.type}}</view> <

本文主要讲解小程序二维码的基本概念，帮助开发和运营人员更好的掌握小程序参数二维码，同时也包含小程序二维码官方文档解读，更好的掌握小程序参数二维码在业务中的使用 一，小程序二维码小白介绍 二，小程序二维码开发介绍 三，小程序二维码生成介绍 四，小程序二维码官方文档解读 一，小程序参数二维码小白篇 介绍参数二维码的基础知识，让开发者和运营者知道什么是参数二维码 1. 首先我们要了解，什么是小程序的二维码？ 以下是小程序二维码 小程序的菊花码 普通的小程序二维码 2. 为什么小程序码是圆的放射型，也称为菊花码 小程序最开始使用的是常规方形的二维码，后面微信专门为此设计了一套菊花码，也就是图二，为什么要专门搞一套小程序特有的编码呢，估计是 （1）专利原因 方形二维码的专利属于别人，微信没有专利。 （2）区分普通二维码，减少用户扫码额疑虑 将小程序和普通的二维码进行区分，现在大家看到二维码，都不敢随便扫，但是如果提前知道二维码属于哪一类，对手机有没有危害性，这样就会减少扫码人的顾虑，大家看方形的二维码中间那 块还是圆的，就是为了，让大家知道这个是小程序，而且微信生成的二维码里，还有一句提示，明确的告之用户，这是小程序，可以放心使用 更多小程序的菊花码故事，请跳转到这里 https://www.qcloud.com/community/article/347791 3.

引子 ： 一个指标引发的血案 https://www.cnblogs.com/Sherlock09/p/11726885.html 性能优化 进入移动互联网时代，传统Web开发技术（HTML，CSS，JavaScript）风光不再，客户端技术（iOS以及Android）依靠良好的体验重新崛起。但是客户端技术的开发效率始终无法与Web技术抗衡，同时会受到诸多平台层面的限制。在这一大背景下，小程序独特的架构诞生了，它将Web前端技术与传统的客户端技术结合在一起，其目的是在开发效率上超过传统的客户端技术，在使用体验上超越传统的Web前端技术。由于小程序的架构区别于传统的Web前端技术，开发者在开发过程可能会遇到一些性能上的问题。本文旨在介绍百度小程序一些实现原理和优化手段，帮助开发者优化自己的小程序。 一 小程序运行时简介 在传统的Web前端项目中，所有代码全部运行在浏览器中。而小程序提供的运行环境有两种，分为逻辑层和视图层。假设现在开发者的小程序项目中有两个页面 pages/index和pages/home ，那么逻辑层代码指的是 app.js 与 pages/index/index.js 还有 pages/home/home.js ，视图层代码指的是 pages/index/index.swan 和 pages/home/home.swan

一、获取手机号按钮报错：提示获取失败，该appId没有权限 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号 </button> 注： 问题出现原因，当前小程序账号没有进行“ 微信认证 ” ， 解决方案，点击微信认证详情，认证处理之后可以使用。 点击参考 微信开发社区 二、微信小程序授权获取手机号接口注意点： 1.因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 <button> 组件的点击来触发。 注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。 2.使用获取手机号接口的小程序需要“微信认证”通过的可以使用 3.接口调用需要后台解密处理，详情参考官方文档 更多： 微信小程序实现纵向滚动块--scroll-view 微信小程序实现横向滚动块--scroll-view 微信小程序web-view使用整理 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/1933905

todo小案例简书： https://www.jianshu.com/p/ade69ae9e8ab 该作者还要一些相关的东西可以去看看，他对小程序开发的说明 上面还有一些文件夹，assets和images是分别用于存放一些大文件和图片的，例如音频、本地文件之类的都可以存在里面，文件夹名称是可以随意更改的，不像android这类资源文件夹是有个规范的约定，不能随便修改名称。 pages文件夹中存放的就是各种页面模块，这里建了两个页面模块，一个是index首页，一个是logs操作日志页，小程序中要求下方tab最少甚至2个，最多设置5个，在使用的时候要注意下。 每个页面模块一般由3类文件组成： xxx.js： 在js文件中主要是用来定义页面变量和函数方法的，小程序的定义语法和vue.js这类MVVM框架非常像，可以直接参考最后一节的代码样例，一看就明白了。 xxx.wxml：wxml类似h5中的html文件，用于描述页面的布局结构，需要注意的是wxml的标签名称和html的还是有很大不同的，需要熟悉下，这些标签和关键字。 xxx.wxss：wxss类似于css文件，其中描述了页面中需要用到的样式。 数据绑定 数据绑定是整个小程序框架的核心，其实就是客户端用的比较多的MVVM框架，可以做到逻辑层的数据和视图层的数据关联变更，这样就可以方便的实现通过事件触发逻辑层的数据变化

这个婚礼邀请函是之前帮别人做的，现在人家婚礼举办过了也没啥关系了，想着就修改成通用模板进行开源，方便大家尤其是小白们克隆项目之后稍微修改就能够直接使用。 当时自己开始这个项目时候也是查阅了很多教程文章，但无一列外都需要大量的小程序开发知识储备，对于当时需要快速构建一个项目的我来说真的焦急，很希望有一个可以直接使用的模板，项目完成后有深入的想法可以再学习。 扫码体验 ​ 项目展示（多图警告） 首页 ​ 照片页 ​ 地图页 ​ 祝福页 ​ 留言页 ​ 项目下载 https://github.com/Zuowendong/wechat-invitation 项目部署 项目目录下执行 npm install 进入项目执行 npm run dev 在微信开发者工具中预览 代码详解 代码也没啥好解释的，会看的就自己看了。不愿意看的详解了也没啥意义，想要学习的话还是需要前期准备相关知识储备：mpvue，小程序开发，小程序云开发。看官方的开发文档就可以了。 定制开发 AppID(小程序ID)修改成自己的 main.js中初始云开发环境名修改成自己的 service文件中云开发config修改成自己的云开发环境名 首页的婚宴举办信息、音乐资源的引用地址的修改 首页和照片页的图片资源引用 ，都在封装的组件 indexSwiper.vue、swiper.vue中 地图页的导航经纬度和新人电话号码的修改

众所周知如今市面上端的形态多种多样，手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 　小程序开发有哪些痛点? 频繁调用 setData及 setData过程中页面跳闪 组件化支持能力太弱(几乎没有) 不能使用 less、scss 等预编译器 request 并发次数限制 　为什么使用第三方框架? 只要熟悉vue或react即可快速上手,学习成本低 一套代码可在多端编译运行(微信,支付宝,h5,RN) 支付宝小程序暂不完善 组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题 支持使用第三方 npm 资源 使小程序可支持 Promise，解决回调烦恼 可使用 Generator Fu-nction / Class / Async Function 等特性，提升开发效率 对小程序本身的优化，如生命周期的补充，性能的优化等等 支持样式编译器: Scss/Less，模板编译器，代码编译器：Babel

创建wepy项目 全局安装或更新WePY命令行工具： npm install wepy-cli -g 在开发目录中生成Demo开发项目： wepy new myproject ， 1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板 切换至项目目录： cd myproject 安装依赖： npm install 开启实时编译： wepy build --watch（也可以npm run dev，详细查看package.json） wepy本地运行项目步骤如下： 首先gitLab拿去代码，进入根目录npm install，然后npm run dev生成dist文件，在开发者工具中就打开小程序项目调试，将项目目录选择dist，即可实时看到调试效果 2. 项目目录介绍： image.png 开发过vue的话，这个配置很类似 3. 项目上线注意事项： 首先，项目要遵从小程序的上线规则，句规则参照： https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000808396a4260c0f1066c5a551801&highline=%E5%BC%BA%E5%88%B6%E8%8E%B7%E5%8F%96%E7%94%A8