微信小程序开发笔记①该文章是博主正在学习微信小程序时，为了让自己日后能更好地复习，也为了和大家交流做的笔记。基础前提：已经注册好微信小程序开发账户、安装好微信小程序开发平台。

微信小程序开发笔记初始化项目文件说明官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

本人记性极差，所以经常总结工作中遇到的一些难题笔记，用来加深记忆，下次用到同样的问题可以直接拿来看，提高工作中的效率。此文章是工作中的笔记，描述可能不是那么清楚，有问题，大家可加我微信一起交流学习。最近在开发微信小程序，把自己在项目中经常遇到的知识点记录下来，以便下次开发的时候查看。开发小程序开发工具推荐vscode写代码，微信开发工具用于查看效果和调试。1、自定义标题栏现在UI要求越来越高，高频

文章目录一、前文二、微信支付JavaSDK三、示例一、前文微信小程序开发笔记——导读微信支付—SDK与DEMO下载先看README.md二、微信支付JavaSDK对微信支付开发者文档中给出的API进行了封装

什么是flex布局在上一篇博客里，笔者在hello.wxss里使用了display:flex;。什么是flex呢？flex布局是W3c组织在2009年提出的一个新的布局方案，其宗旨是让页面的布局样式更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对flex布局的支持并不完善，造成了开发者并不知道与这种布局方式的存在或者使用

微信小程序开发笔记——构建npm在使用微信小程序开发工具开发项目的时候，会遇到需要使用一些npm进行管理的包，这时我们就需要在项目中构建npm以进行使用。

事件官网描述https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html在小程序中存在两种事件，分别是冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。bind事件bind事件属于冒泡事件view1view

获取颜色十六进制值十六进制颜色代码是在软件中设定颜色的代码，可以先查询以下目标颜色的RGB值，然后将三个值均转换成十六进制即是目标颜色的十六进制值。转换这里可以使用电脑计算器中的程序员模式。比如目标颜色为香芋紫，查询得知该颜色的RGB值分别为R：200，G：180，B：235。利用计算器，先将200转换成十六进制，如下图所示：在DEC一栏输入十进制值，HEX一栏就会显示对应的十六进制值，这样将三个

文章目录一、前言二、实现效果1、添加日记2、保存日记3、查看日记详情4、删除日记三、程序实现1、日记主页面程序1.1、.wxml文件1.2、.wxss文件1.3、.ts文件2、添加日记页面程序2.1、.wxml文件2.2、.wxss文件2.3、.ts文件3、日记详情页页面程序3.1、.wxml文件3.2、.wxss文件3.3、.ts文件四、详细设计1、添加日记1.1、获取输入文字1.2、保存输入内

文章目录一、前言二、前端代码wxml三、前端代码js四、云函数五、程序流程一、前言微信小程序开发笔记——导读大部分微信小程序开发者都会有这样的需求：获取小程序用户的手机号码。

断断续续的我又回来了，虽然没几个人看，但是呢自己总要有点仪式感。主要是最近又写了一个小程序，发现写完vue回头写微信小程序简直顺畅的不得了，比我直接用Android切过去可真的好太多了。OK，废话停止，正文开始...官方文档微信小程序-网络前提：已在微信公众平台==》开发==》开发管理==》服务器域名request合法域名中配置请求的基础域名。还有uploadFile合法域名、socket合法域名

前言  小程序已经火了一段时间了，各大厂商也纷纷推出自己的小程序。想想前端好难啊，天天都要面对新知识，不学习就要掉队，这些天整理公司的小程序项目发现好多点又忘记了~~~心塞塞。所以痛定思痛写做些笔记吧，供大家参考也自己总结下。1、导入  这里我觉得有必要理解几个概念export、exportdefault、module.eports的区别不过多的解释看module.exports和exports,

文章目录一、前文二、依赖三、属性3.1application.yml3.2WxPayProperties四、配置Config五、应用Controller六、PostMan调试6.1统一下单6.1查询订单（正常）6.1查询订单（异常）七、其他一、前文WxJava-微信开发JavaSDK（开发工具包）weixin-java-pay-demo-基于WxJava和SpringBoot构建，演示微信支付后端

文章目录一、onfire.js介绍二、API介绍三、实例应用四、onfire源码五、实例源码一、onfire.js介绍一个简单实用的事件订阅和发布的库。onfire.js的github地址二、API介绍函数说明on(eventName,callback,context)订阅eventName事件，当事件触发时，回调callbackone(eventName,callback,context)订阅e

文章目录一、iconfont素材网二、iconfont项目设置三、微信小程序项目配置四、全部源码一、iconfont素材网进入iconfont素材网挑选想要的素材，加入购物车点击右上角购物车图标，将图标添加至项目二、iconfont项目设置项目设置，勾选base64生成代码，下载至本地有用的是iconfont.css三、微信小程序项目配置iconfont.wxss就是iconfont.cn网站下载

微信小程序navigationBarTitleText导航栏标题设置全局设置app.json"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"******","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8"},静态设置app

一、页面布局position:relative;相对布局。使用top、left、bottom、right。position:absolute;绝对布局。display:flex;flex-direction:row;左右布局。z-index层级关系。position:relative生效。假如text需要垂直居中显示先给text添加一个view，在view中样式设置display:flex;jus

一、下载微信开发者工具点击微信开发者工具下载网址到微信开发者工具网址，根据自己的设备选择合适的版本。二、打开微信开发者工具1、选择小程序——点击新增。（页面还会显示之前导入或者新建的项目，也可以通过管理按钮进行删除操作）2、按照提示添写页面内容。目录：可以选择在桌面新建一个空的文件夹AppID：可以写自己注册好小程序的AppID或者使用测试号3、点击新建，微信开发者工具进入开发环境并且基本的代码目

微信小程序开发笔记（一）–偶遇深拷贝与浅拷贝问题js文件/***选择数据--checkbox复选框监听事件value值|需要上传的数据|不需要上传的数据*/checkboxChange:function

微信小程序页面的生命周期下面是每个页面都存在的生命周期函数，在特定的时期就会进行回调，我们可以在函数中写上自己的逻辑代码实现我们想要的功能。如果我们新创建了一个页面，在js文件中我们可以看见所有的生命周期函数Page({/***页面的初始数据*/data:{},/***生命周期函数--监听页面加载*/onLoad:function(options){//第一次完整打开小程序页面时},/***生命周

最近几天在做微信小程序方面的研究，记录一下过程的点滴。给data里的内容赋值在onLoad方法为data中定义的变量赋值，直接使用=号是不起作用的。需要使用setData方法this.setData({activities:api.getActivities("11",function(data){console.log("getActivities"+data);})})创建底部或顶部标题栏ap

微信小程序开发笔记（持续更新）1.项目中所用到的data可以在index.js的pagedata下设置2.wxml--------------->html标记对比------------>-------

**微信小程序开发笔记（1）–设置透明按钮`一个菜鸟的学习笔记如有错误轻点喷谢谢在学习微信小程序时遇到想做一个完全透明的按钮确认提交`一开始在微信公众平台的组件里发现属性里有plain可以使按钮透明使用后发现背景会透明但是有边框

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/看微信文档时看到这个很有趣的api，但是官方的文档和例子关于这个api的介绍都是很让人失望的，所以花了点时间了解了以下这个方法，做个记录，供参考。简介首先，我的理解是，这是一个观察器（废话），它用来监测目标对象与某个参照物的相交情况。什么是相交情况？通俗的说，就是两个区域有重叠（公共区域）了，类似与数学中的交集，

微信小程序开发笔记一、小程序简介小程序起源于微信的webview；此类API最初是提供给腾讯内部一些业务使用，很多外部开发者发现后，照葫芦画瓢，逐渐成为微信中网页的事实标准。

窗口监听官方描述https://developers.weixin.qq.com/miniprogram/dev/api/ui/window/wx.onWindowResize.html监控窗口的大小时候发生了变化窗口监听操作/***窗口大小改变监听事件*/window:function(){wx.onWindowResize((result)=>{console.log(res)})},动态设置

微信小程序开发笔记（1.3）微信云数据库的使用前言数据的导入与导出数据库的基本操作增删改查前言微信小程序云开发主要包括云数据库和云函数的使用。

1、用户登录/注册功能的实现该小程序提供登录/注册功能，输入用户名和密码点击登录，注册时系统首先判断输入手机号码是否正确，如果不正确则提示“输入号码不能为空”，“手机号格式不正确”或者“手机号已被注册”，若输入信息正确，则连接发送验证码的接口。注册后登录成功则显示个人信息界面，否则提示用户名或密码错误。该功能位于“设置”版块中的“切换账号”模块内。图1用户登录/注册该模块主要包括两个部分：(1)登

WXML提供模板（template）竖版1.主界面//list.jsnewslist:[{id:1,title:"《逆流而上的你》马丽搭档潘粤明都市轻喜剧",img:"../../photos/1.jpg",cTime:"2019-2-1015:25"},{id:2,title:"《天真派武林外传》迷你版的同福客栈",img:"../../photos/2.jpg",cTime:"2019-2-1

列表页面加载更多文章/*pages/list/list.wxss*/.loadmore{text-align:center;margin:10px;color:rgb(126,124,124);font-size:16px;}加载更多//list.js//获取应用实例constapp=getApp()Page({data:{newslist:[],lastid:0},loadDate:functi

近期开发微信小程序涉及到wx.request()网络请求，原代码为：//pages/index/home.jsvartemp_data;Page({/***页面的初始数据*/data:{items:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){//页面初始化后发出新的请求wx.request({url:"http://2327.free.ngro

rich-text富文本框，可以直接写html，并且会进行解释官方描述https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html主要通过nodes属性传进去我们需要写的东西，一般可以直接传递一串html文本，如下data:{html:"标签",}还可以传递json格式的数据，通过规定的语法输出我们需要的html

参考教材：《微信小程序开发入门与实践》雷磊前置知识：JavaScript，CSS新建项目安装好微信开发者工具后，我们就可以开始新建我们第一个微信小程序了。选择新建项目，填入一个项目名称以及目录（即在磁盘上存放的路径），AppID这里如果没有申请，点击测试号系统会提供一个给你一个AppID，主要用于方便开发者学习和调试。在这里，我选择的是系统提供的默认AppID，确认无误后，点击右下角的新建，就生成

前言：因为前段时间一直在做关于微信小程序方面的项目，作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的，当然前提是要理解微信小程序的基本语法和请求原理。该篇博客主要记录的是在编写微信小程序时使用比较频繁，实用的一些方法和一些基本原理的概括。个人觉得把这些方法掌握好了，开发一个小型的微信小程序那是绰绰有余的啦。当然我这里并没有深入的对一些语言进行详细的概述，纯属个人总结，

本篇接微信小程序开发笔记（三），这里主要是来实现几种常见的效果，增强对微信小程序UI的理解和使用。

微信小程序官方示例https://devework.com/weixin-weapp-auth-failed.html一、小程序用户唯一性通过微信开发工具，新建项目，默认index页面就是获取微信授权的信息，获取的微信用户信息如下：userinfo.pngwxml微信登录jsonLoad:function(){if(app.globalData.isBind){//如果已经绑定直接返回上一级wx.

站在巨人的肩膀上，所以先推荐一下两篇微信小程序UI相关的文章，我感觉挺好的，也许对你也有帮助。CSS教程手册CSS知识点整理因为我是Android端开发，所以思考方式可能会按照自己在Android中的布局方式去理解。在开发之前，首先把微信官方的组件看一遍，可以直接使用组件的用组件来完成。一、基础个人感觉薄荷健康商店小程序挺好看的，这里模仿这个小程序UI设计和京东商城UI设计。当然功能添加会更多的使

微信小程序官方文档微信小程序示例，仅做练习微信小程序使用数据来自：免费开放接口API开放接口APIpeakchao参考：微信小程序官方Demo从零开始学微信小程序，看这些就够了一、文件结构image.pngproject.config.json工具配置开发者工具的配置这个主要针对开发者的对工具的使用习惯，自己进行的个性化配置，当换了电脑重新安装工具，只需载入同一个项目的代码包，开发者工具就会自动恢

上一篇在介绍微信小程序的基础的时候，其实已经或多或少的谈到了一些坑了，此篇文章会详细罗列出在开发过程中遇到的坑。首先通过公司的这个项目，让我彻底的了解了微信小程序的开发SDK。之前有过一种说法，说H5开发的应用程序会代替Android及iOS，在这里想以一个Android开发者的身份说一下，就目前的技术来说，不可能完全代替。真的开发过就知道了，这里给出技术方面的三点原因吧：一个是微信团队的深层次技

本篇文章适合有一定编程基础、刚接触微信小程序的兴趣爱好者阅读。如果您是前端工程师可以直接去看微信小程序的接口文档就会了。虽然微信小程序的IDE非常非常的不好用，但本人对前段开发不是很熟，为了不麻烦，就凑合用了。。。至少比文本编辑器强啊。。。还在开发过程中，会随时更新记录细节。正文开始：首先说一下IDE的使用吧，打开需要输入appid及使用微信扫描登录。这个appid及开发权限需要在微信开放平台申请

2018-04-13普通页面跳例子：wxml页面听力js页面方法hearing:function(){wx.navigateTo({rl:'../hearing/hearing'url后面可以传递参数？参数名=参数值})}js页面数组的生成arr:[键值，也可以直接写值]监听页面加载函数onLoad：function（options）{实例化某对象varid=opitons.id控制台输出cons

前言：因为前段时间一直在做关于微信小程序方面的项目，作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的，当然前提是要理解微信小程序的基本语法和请求原理。该篇博客主要记录的是在编写微信小程序时使用比较频繁，实用的一些方法和一些基本原理的概括。个人觉得把这些方法掌握好了，开发一个小型的微信小程序那是绰绰有余的啦。当然我这里并没有深入的对一些语言进行详细的概述，纯属个人总结，

swiper轮播图小程序中的组件配置参数：微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html常用配置：indicatorDots:“true”,//是否显示面板指示点，默认为falseautoplay:“true”,//是否自动切换，默认为falseinterval:“3000”,//自动切换时

一、前言继承上一篇所说的，有了对微信小程序的基础概念后，这边将会示范动手做一个小程序，在动手的过程中我们可以更快的熟悉小程序里面的架构和开发流程。二、小程序的设计这次要做的是一个猜数字的程序，程序会自动产生一组4个不重复的数字，例如1835，玩家看不到数字，但每次玩家输入一个数字，系统会自动给提示，A代表位置跟数字的正确，B代表数字正确但位置不正确，例如现在输入1502，会提示1A1B，因为1的数

一、为什么要学习微信小程序开发微信小程序是一个可以在微信上打开的轻应用，他是由多个页面组成的程序，跟传统APP比较如下：优点1、不需要在应用商店下载，不占用内存空间，即开即用2、可以在微信内直接打开使用，方便透过微信传播分享，有许多API可以很方便的调用（例如微信支付）3、开发成本低，微信提供了一整套的开发者工具和云数据库，不需要再另外搭环境和安装中间件缺点1、需要在微信小程序限定的框架内搭建，小

参考教材：《微信小程序开发入门与实践》雷磊前言微信提供了小程序的官方开发工具—微信开发者工具,当然，这个微信开发者工具还可以用来调试运行在微信上的网页以及微信JS-SDK。微信开发者工具官方下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html注意，Windows版本的仅支持window7及以上版本。

0、杂记0.1、在实际的开发中，图片资源不会存储在小程序的目录中，因为小程序的大小不能超过1MB（现在改为2M）。超过则无法真机运行和发布项目。我们应该将图片都存放在服务器上，让小程序通过网络来加载图片资源。0.2、在wxss中，本地资源是无法使用的，比如：background-image,如果使用本地的图片是无法显示的，可以使用网络图片来代替本地图片,同时要加上background-size属性

0、杂记0.1、在实际的开发中，图片资源不会存储在小程序的目录中，因为小程序的大小不能超过1MB（现在改为2M）。超过则无法真机运行和发布项目。我们应该将图片都存放在服务器上，让小程序通过网络来加载图片资源。0.2、在wxss中，本地资源是无法使用的，比如：background-image,如果使用本地的图片是无法显示的，可以使用网络图片来代替本地图片,同时要加上background-size属性

我们知道，当一大段文字显示在一个页面且其不是作为最主要内容展示的时候，通常只会显示前几行，如果用户想要看全部，那么他可以点击“查看全部”按钮来查看所有内容。这里介绍在小程序中完成该功能。先看演示：思路确定好显示的最大行数，然后写出隐藏多余文本的样式用于切换判断文字的内容是否超出事先定义的行数给“查看更多”按钮绑定事件，切换样式与提示文字代码实现页面wxml今日NBA头条比赛还没结束，罗斯还是比赛的

本文主要是熟悉微信小程序自定义组件的开发，以一个常见的导航栏（Tabbar）需求为例。官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/首先我们先看一下最终实现的效果：这是一个非常简单的例子，就用这个例子敲开自定义组件的大门。如果你对vue的组件很熟的话，那么你应该会轻松上手。思路改组件