微信小程序开发文档

目录 我的第一个微信小程序 一、小程序开发文档 二、注册登录 三、新建项目 四、导入项目 五、删除项目 六、项目组成 七、工具栏 八、小程序目录 九、全局配置 十、页面配置 十一、页面数据渲染 十二、小程序的双线程模型与生命周期 十三、事件和事件冒泡 我的第一个微信小程序 一、小程序开发文档 搜索进入“微信公众平台”官方网站，在下方的“账号分类”中，查看“小程序”中的“小程序开发文档”，在“工具”中，选择“微信开发者工具”，下载安装包：稳定版 二、注册登录 在“微信公众平台”首页右上方“立即注册”，选择“小程序”，“绑定邮箱（使用没有在微信公众平台绑定过的邮箱）”、“邮箱激活”、“信息登记”。 输入邮箱密码进行登录。 然后在微信上同意即可。微信扫码也可以登录。 三、新建项目 登录成功后，选择小程序，创建项目demo1，自定义目录位置，注册AppID（在已经登录的微信公众平台，小程序信息—>配置服务器—>开发设置—>复制粘贴AppID）。 添加开发者：就是在公司中会用到，添加项目成员的，可以合作开发项目。 选择“不使用云服务”，使用JavaScript语言，新建。 创建成功后，也可以新建项目。 四、导入项目 导入项目（本机下载好的其他人的项目），也可以改项目名称，目录就是本机下载好的项目，AppID是别人的，要改成自己的，这样就是自己的项目了。 五、删除项目 在登录后

1.申请一个自己的微信公众号/小程序 云开发与普通的小程序开发不同，云开发必须填写appid，且不能使用测试号，所以需要申请一个自己的微信公众号/小程序，在 官方微信小程序页面 中，点击页面最下方的前往注册即可。 申请成功后，进入微信公众平台|小程序-----开发------开发设置，查看自己的小程序id 2.创建云开发环境 2.1 打开你的uni-app项目，配置小程序ID 2.2 配置完后，在微信开发者工具中运行此项目 2.3 在打开的微信开发者工具中，点击云开发按钮 点击创建创建环境，填写所需环境名称、环境ID后即可 然后就会弹出一个云开发控制台，此处我们点击数据库，添加集合。 集合相当于数据库的表，我们填写完集合名称后，点击确定即可 这样我们接下来就可以进行微信云开发。 3 使用步骤 3.1 初始化 我们在使用数据库之前，需要进行初始化操作，若需要深度使用可查看 官方文档 ，此处仅介绍简单的使用方式。 我建议在App.vue的onLaunch中进行初始化，此处env所需要填写的你的环境id，若忘记了环境ID，可在云开发控制台中进行查看。 3.2 添加信息 我直接展示代码了，wx.cloud.database 处要填写你自己的云开发环境的ID < template > < view class = " content " > < button @click = "

从上家公司辞职之后的微信小程序端自留总结 / 01 / 授权登录：图片摘自微信小程序开发文档，很清楚很详细，前端开发者需要做的事情如下 wx.login 获取 code 到后台换取用户唯一标识 OpenID 和 会话密钥 session_key（此处需要后台调接口向微信端发起请求） 获取用户信息，若用户已授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框；若没有用户授权信息，则弹框提示用户授权。 向后台发送用户信息及openid，如果该用户已绑定账号，设置全局变量保存用户信息，若没有，去绑定（线上微信小程序的流程，新的微信小程序demo不需要绑定） https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 关于用户是否已授权，已获取手机号，可在app.js中判断，如果用户已授权，下一次进入应直接进入首页。 / 02 / 获取手机号，与授权一样需要一个按钮，需先调用wx.login接口，这里应该也需要后台去解析出该用户的手机号 / 03 / 可能需要的几个常见api -从本地相册选择图片或使用相机拍照。 https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html

逐步更新中，根据 微信公众平台 官方提供的开发文档、开发工具、设计指南和小程序体验DEMO，从零开始一步一步陪大家一起入门。 目录 1、小程序开发总体流程 2、开发小程序 ​2.1、代码结构 2.2、代码版本管理 3、提交审核和发布 4、项目实战 4.1、项目需求 4.2、项目实现 1、小程序开发总体流程 如官网图所示，四步即达简单易懂。 1.1、点击前往注册，即可注册微信小程序并与个人微信进行绑定。 1.2、填写相关信息。 1.3、下载开发者工具，并对照参考开发文档即可进行小程序的开发和调试。 1.4、小程序版本分为开发板、体验版和正式版。其中正式版需提交审核才可发布（发布后用户通过搜索可以直接访问），开发版（开发过程中真机调试使用）和体验版（15人小规模测试使用，需要管理员邀请才可扫描二维码进行体验）则无需提交审核。 2、开发小程序 官网下载开发者工具，微信扫码登录后新建小程序项目，并输入之前注册的小程序的AppID（微信公众平台小程序-设置-基本设置-帐号信息-AppID复制）即可得到官方预设的示例程序。根据项目需求根据官方api文档进行开发即可，本文只是给大家展示微信小程序开发流程，暂不进行演示。 ​2.1、代码结构 2.1.1、.json 后缀的 JSON 配置文件（静态配置文件） 2.1.2、.wxml 后缀的 WXML 模板文件（相当于HTML） 2.1.3、

微信小程序获取用户信息接口调整目的以及使用方法介绍 微信小程序已经调整了获取用户信息的接口 ，还不知道的开发者看一下官网给出的理由和方法： 为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息： 1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。 详情参考文档: https://developers.weixin.qq.com ... mponent/button.html 2、使用 open-data 展示用户基本信息。 详情参考文档: https://developers.weixin.qq.com ... nent/open-data.html 微信为什么要调整接口？ 开发者可以根据需要来调取用户信息，而不是用户首次进入小程序就弹出授权的弹框，这样对于用户来说是不友好的。比如可以在用户点击登录的时候再获取用户信息，或者提交表单的时候等等，总之可以根据业务逻辑进行开发。 然而对于我们项目的业务逻辑却是不好的事儿，因为我们需要在一开始就获取用户的信息入库，相信很多人都会有这样的需求

目录 1、project 和 sitemap 配置 2、全局配置 app 3、局部配置 page 小程序的很多开发需求被规定在了配置文件中，这样做可以更有利于提高的开发效率，并且可以保证开发出来的小程序的某些风格是比较一致的，比如导航栏、顶部TabBar，以及页面路由等等。 小程序中有很多配置，其大致可以分为三类：（1）project 和 sitemap 配置（2）全局配置 app（3）局部配置 page。下面具体对这几种配置进行说明，这是小程序官方文档关于相关配置的链接： 配置小程序 1、project 和 sitemap 配置 （1）project.config.json ：项目配置文件，比如项目名称、appid 等； 这个配置文件记录了小程序的一些关于项目的相关配置（在小程序开发工具的详情按钮中可以对一些配置进行修改），其实早期的小程序项目是没有这个配置文件的，但是如果没有这个配置文件就会出现 多端配置不一致的问题 。比如当你和同事协同开发一款小程序的时候，他用的是 2.7.0 版本开发的，而你默认的是 2.7.1 版本，这种情况就需要其中一个人进行手动配置，这样会造成不必要的麻烦，因此微信考虑到了这种情况，保证一个项目中只有一种配置，这就是 project.config.json 的作用。 （2）sitemap.json ：小程序搜索相关的配置；

代码片段 ： wechatide://minicode/IUoCyemJ7D3d GitHub : https://github.com/WozHuang/Miniprogram-Demo/tree/master/custom-tabbar 在项目中要求用tabbar，奈何老板嫌微信自带的tabbar太丑而且功能也不够丰富，因此需要自定义tabbar，没办法就只能自己重新造一个，在造轮子之前从网上找了不少但都是直接使用navigateTo或者redirectTo实现跳转功能，每次都重新加载一下页面实在是受不了。 在细读了微信的api文档后发现能够使用 hideTabBar 这个方法将原有的tabbar隐藏掉，这样只要自己重新写一个tabbar就可以了 实现原理 利用 wx.hideTabBar({aniamtion: false}) 隐藏默认的tabbar 点击时使用 wx.switchTab 进行跳转 优点： 自定义更好看的tabbar 相比其他用navigateTO实现的tabbar效果更好（没有页面跳转） 可以自定义页面跳转方式，比如第三个按钮的目标页面是一个二级页面，不需要tabbar 缺点： 相比于原生的tabbar，首次进入页面的时候需要加载tabbar，导致初次切换到页面的时候tabbar会闪烁一下，视觉效果差点 注：可以考虑在单页面中引入多个页面来避免闪烁的问题

转自 https://www.cnblogs.com/dotnetcrazy/p/10597311.html#top 文章汇总： https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录： 一文摸摸小程序的底¶ 1.屁话一箩筐¶ 2.记录点小程序功能点¶ 2.1.前言¶ 2.2.页面初始数据的使用¶ 2.2.1.获取¶ 2.2.2.设置¶ 3.弹框提醒¶ 4.页面自定义属性值¶ 4.1.H5的自定义属性值¶ 4.2.小程序版¶ 5.小程序标题¶ 6.拨打电话¶ 7.图片背景¶ 7.1.背景图片¶ 7.2.页面填充¶ 7.3.新思路¶ 8.页面跳转¶ 9.地图相关¶ 9.1.简单案例¶ 9.2.Map组件¶ 1.简单案例扩展¶ 2.Map组件案例¶ 补充说明¶ 1.关于调试¶ 2.关于开发者设置¶ 3.关于网络资源的说明¶ 4.发布和预览¶ 一文摸摸小程序的底 写在前面的话：算不了入门教程，只能算这几晚的摸索教程，下次会出一篇 一文入门小程序 本文示例源码： https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base 1.屁话一箩筐 有些同志留言说我消失了，文章更新频率比以前慢多了？我这边先统一回复一下： 最近这 几个月 利用空闲时间把三国读完了（咳

WXSS 样式 文件组成 ​ 项目公共样式： 会被注入到小程序的每个页面； 页面样式： 与 app.json 注册过的页面同名且位置同级的 WXSS 文件； 其他样式： 可被项目公共样式和页面样式引用， 尺寸单位 rpx，以375个物理像素为基准，即在一个宽度为375物理像素的屏幕下，1rpx = 1px WXSS 引用 CSS 中，开发者这样引用另一个样式文件 @import url('./test_0.css') 这种方法在请求上不会把test_0.css合并到index.css中，也就是请求index.css的时候，会多一个test_0.css的请求。 小程序 中的样式引用是这样写的， @import './test_0.wxss' 由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会 因为样式的引用而产生多余的文件请求。 内联样式 WXSS 内联样式与 Web 开发一致 小程序支持动态更新内联样式 <!--index.wxml--> <!--可动态变化的内联样式--> <!-- { eleColor : 'red' , eleFontsize : '48rpx' } < --> <view style="color: { { eleColor } } ;font-size: { { eleFontsize } } "><view/> 选择器 类型

微信小程序的自动化测试框架 微信发布了小程序的自动化测试框架Minium，提供了多种运行验证方式，其特点： 支持一套脚本，iOS & Android & 模拟器，三端运行 提供丰富的页面跳转方式，看不到也能去得到 可以获取和设置小程序页面数据，让测试不止点点点 可以直接触发小程序元素绑定事件 支持往 AppSerive 注入代码片段 可以调用部分 wx 对象上的接口 官方地址如下：https://git.weixin.qq.com/minitest/minium-doc/tree/master minium 是为小程序专门开发的自动化框架, 提供了 Python 和 JavaScript 版本。使用 minium 可以进行小程序 UI 自动化测试, 但是 minium 的功能不止于仅仅是 UI 自动化, 甚至可以使用 minium 来进行函数的 mock, 可以直接跳转到小程序某个页面并设置页面数据, 做针对性的全面测试, 这些都得益于我们开放了部分小程序 API 的能力。除此之外，小程序有部分组件使用了系统原生的组件，对于这部分的组件，我们也基于 uiautomator 和 wda 做了补充。 环境依赖 Python 3.x 微信公共库版本 >= 2.7.3 下载并安装稳定版微信开发者工具，工具下载地址：https://developers.weixin.qq.com