微信小程序开发文档

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

小程序导航 https://wq.xmaht.top 开发者在开发小程序的时候可能会碰到一些这样的问题： 问题1 开发者工具上看效果没问题，但是在真机上测试不行？ 问题2 有用户遇到小程序功能无法使用的问题，但无法快速定位解决？ 今天与大家分享一些真机定位的技巧，可以解决上面两个问题。 1、 vConsole开发利器和远程调试功能 针对问题1，我们提供了 vConsole 开发利器和远程调试功能，可以协助开发者在定位真机上的问题。 vConsole 的有四个Tab面板，可以先看下 Log 面板，看是否有异常信息，异常类型 thirdScriptError 是框架捕捉到的开发者的代码执行的异常，可以优先处理异常信息看是否可以解决问题。Log 面板可以看到异常出现的文件和行数。 除了异常日志，开发者还可以通过 console.log接口在一些关键执行路径上打日志来定位问题，这些日志会呈现在 Log 面板上。 vConsole 默认是不开启的，可以通过下面2个方法来开启： 1 开发版和体验版可以点击小程序页面右上角的...按钮打开的菜单项“打开调试”来开启 vConsole。 2 正式版没有“打开调试”的菜单项，可以先通过开发版和体验版来开启 vConsole，然后再打开正式版。或者可以预埋一个隐藏操作，比如连续点击某个 Button 多次，然后调用 API 接口 wx

案例一： https://www.cnblogs.com/liao123/p/11005796.html 很精彩的案例，值得看一下（重点是要知道原理） 案例二： 接合微信小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 详见 官网代码见上面圈红的开发者工具预览效果。 使用该方法需要使用到： if ( typeof this . getTabBar == = 'function' && this . getTabBar ( ) ) { this . getTabBar ( ) . setData ( { selected : 0 } ) } 但 ：个人不建议使用这种方法（案例二）, 建议使用自定义导航栏组件,隐藏原生的导航栏（在app.js中的onLaunch使用wx.hideTabBar()去隐藏） , 方法如案例三 还有如果使用案例二的导航栏的话，需要注意官方文档的这个要求，需要把版本库提高 另外也不使用cover-view + cover-image,因为会因为各种版本库的原因导致各种无法预料的错误。 案例三：个人自定义导航栏简单代码： 效果图： 步骤1：custom-tab-bar(即组件) 文件下： // index.js

本文同步发布在 https://www.cssge.com 因为下个项目需要用微信小程序来开发，所以就找了小程序开发文档来研究。下面记录一下微信小程序的主要开发流程和语法。 账号注册 开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。 注册地址~点我点我 ，注册过程这里就不说了，按照要求一步一步来就行了。 注册成后，登录小程序管理平台，在这里你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。 我们可以在菜单 “设置”-“开发设置” 可以小程序的 AppID 。 小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID。 有了账号，我们还需要一个开发工具来开发小程序。 安装开发工具 前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。 打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！ 框架介绍 小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。类似于现在非常热门的MVVM框架。 响应的数据绑定 框架的核心是一个响应的数据绑定系统。 整个系统分为两块。视图层（View

1.微信小程序具有四个基本文件,包括:app.js,app.json.app.wxss, project.config.json; 其中 app.wxss:是微信小程序的基本样式,所有小程序都会默认使用该页面样式. app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 project.config.json:是整个项目的基本配置,其中包含appid,项目名称,项目是否使用es6等基本设置,可以保证不同电脑上开发小程序时的统一配置. app.js:我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。 2. 小程序发起的都是HTTPS网络请求，所以在小程序公众平台进行配置时需要配置项目对应的域名.在开发调试的过程中可以不校验协议和TLS版本，但在实际上线后必须进行HTTPS协议通信。 3. 小程序中的wxml结构不同于传统html页面,比如,小程序的view结构类似于div,text类似于span,但二者并不相等,其中image标签与html中的image标签并不相同,小程序的image如果要让图片自适应,需要添加属 性,mode=’widthFix’,而html页面没有限制. 4. 小程序中没有document,所以无法操作dom,不能使用jquery库的操作. 5. 小程序的脚本文件中

前言： 最近接到小程序的开发需求，由于之前也没开发过小程序，心情还是有点激动。先花15分钟看一遍小程序官方文档，再花10分钟看一遍mpvue官方文档，然后拿着原型图和UI图就开干。踩了不少坑，写篇博客记录一下。PS：小程序官方文档地址： https://developers.weixin.qq.com/miniprogram/dev/ ，mpvue官方文档： http://mpvue.com/ mpvue： mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心， mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 不得不说对于会vue的人来说，使用mpvue开发小程序基本就是0成本，看一遍文档就能直接上手开发小程序。当然mpvue框架也有很多需要吐槽的地方：比如不支持slot，导致封装公共组件非常的不方便；不支持vue-router，不过通过引入mpvue-router-patch可以在 mpvue 中使用 vue-router 兼容的路由写法。mpvue-router-patch的GitHub地址为： https://github.com/F-loat/mpvue-router-patch 。更多mpvue项目可以在 https:/

在小程序内使用了video视频标签，底部再加上一个悬浮的Btn按钮或是页面的中间弹窗，在页面上下滑动的时候，由于video原生组件的层级太高，会把悬浮（弹窗）给覆盖掉。 像video这种原生组件层级太高，覆盖了其他内容。用z-index去调试的话，在工具上市可以解决的。 但是真机测试的时候还是没有解决该问题。 微信小程序开发文档提供的这么一个组件，cover-view。覆盖在原生组件之上的文本视图，可以覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher。 cover-view只支持嵌套cover-view、cover-image，比较特殊的button是可以在cover-view内部使用 来源： https://www.cnblogs.com/duxingdexin/p/9585285.html

小程序之面试题 一： 小程序与原生App哪个好？ 答： 小程序除了拥有公众号的低开发成本、获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。 二： 简述微信小程序原理？ 答： 微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。 JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。 WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。 WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。 微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。 小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行

微信官方已经开放微信小程序的官方文档和开发者工具。前两天都是在看相关的新闻来了解小程序该如何开发，这两天官方的文档出来之后，赶紧翻看了几眼，重点了解了一下文档中框架与组件这两个部分，然后根据简易教程，做了一个常规的todo app。这个app基于微信小程序的平台，实现了todo app的常规功能，同时为了让它更接近实际的工作场景，也用到了loading与toast这两个组件来完成一些操作的交互与反馈。这个平台给我的直观感受是，技术层面，它跟vue有相似性，但是远没有vue强大；开发时候的思路，不像vue，反倒觉得比较像backbone。所以要是使用过backbone,vue等mvc,mvvm框架的人，会觉得这个平台上手很容易。本文主要介绍这个todo app实现的一些要点。 先补充下本文相关的资料： 官方文档： https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 官方开发者工具下载： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 本文todo app的功能演示： 注：需长按todo的text，才能直接编辑。因为是在手机端，所以不能使用双击事件来进行编辑，改成了长按事件。小程序的平台也没有提供双击事件的绑定。 相关源码： https:/

前言 ： 由于小程序只提供了外面一个获取地理位置、速度的api，并没有获取的相关地位位置的信息等等，因此我们还需要借助一些第三方的api来实现 小程序关于地理位置文档 api ：https://developers.weixin.qq.com/miniprogram/dev/api/location.html, 组件 ：https://developers.weixin.qq.com/miniprogram/dev/component/map.html 实现： 一、使用百度地图的api来获取地理位置的信息 第一步：先去百度开放平台申请akhttp://lbsyun.baidu.com http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key http://lbsyun.baidu.com/apiconsole/key?application=key 第二步：创建应用 第三步：获取密钥（AK）(输入小程序appid) 第四步：在小程序公众平台配置request合法域名（https://api.map.baidu.com） 第五步：下载百度地图api 第六步：在所需的js文件内导入js // 引用百度地图，注意：require传入一个相对路径 var bmap = require('../../libs/bmap-wx/bmap