前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.request 看文档时,提供了示例模板如下: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, suc…

Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个人对象里面包含车辆对象数组, 我们发现人名好现实,但是车辆数量不方便统计,这时使用wxs就能很好的解决 list: [{ id: 1, name: '张三', cars: [{ id: 1, name: '奔驰' }, ...... ] }, ......] // index.wxml<view c…

闲暇里,想学一下微信小程序, 于是,用微信小程序原生做了个扫雷玩. 以下略作总结,分享给大家. 微信里下拉,输入[mini计算器], 看到这个图标的就是了: 说好的扫雷,怎么变成计算器了?原因后面解释... 初探小程序 入门非常简单,想做很好不容易. 对于稍有 web 开发基础(主要是前端)的人来讲, 入门微信小程序确实非常简单,看,文件结构: 以页面名为文件夹,其下包含该页面的四个文件: js文件 [pagename.js]里面就是JS代码 wxml [pagename.wxml]是书写页面结…

先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规的地图事件监听,并没有添加地图服务相关的支持. 不过有了需求,也要想办法解决呀. 图层查询 既然小程序不能直接添加地图服务,那就把图层数据查出来,然后通过添加点线面方式添加到地图,具体要怎么实现呢? 首先想到的是通过图层查询接口把所有数据查出来. 但是既然数据是按图层发布的,一般数据量都比较大,把所…

微信小程序出来有一段时间了,之前没看好小程序(觉得小程序体验不咋好,内心对新事物有抵触心里,请原谅我的肤浅[捂脸][捂脸]),不过后来偶然之间玩过小程序的游戏(跳一跳.球球大作战.猜画小歌 等),顿悟原来小程序的体验还可以做到这样 几乎可以媲美原生啦,此后内心一直有跃跃欲试的骚动,然并卵无奈没有时间.好在公司新版本App上线后终于有时间来搞一搞了,花了两天的时间写了一个简单的服务器请求 把趟过坑记录一下 方便自己查询 也为后来的小伙伴少走些弯路,闲言少叙 下面开始进入正题 1.小程序对开发人员的…

微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下区别: 公众号略显繁琐:我首先要关注才能看到内容,而小程序不用(个人对微信公众号研究不深,不对之处还望见谅) 小程序性能要好一些:虽然我不是很清楚小程序用什么实现,就体验来说确实更接近原生一点:但是微信公众号是用网页的形式来展示内容的,其中的兼容性和性能问题不用我说,各位luer就已经清楚了吧 小程…

大家好 波哥小猿又来啦[斜眼笑],昨天咱们讲了微信小程序简单数据请求,有没有照着教程实现请求的同学们啦 实现的同学举个爪[笑脸].哈哈,好了不扯犊子啦,我相信有的同学已经实现了简单的数据请求,没有实现小程序数据请求的也没关系,大家在我文章里评论我会耐心给大家答复得,争取让看我文章的小伙伴都能学会小程序开发,突然觉得好有成就感[偷笑]. 昨天咱们讲了小程序的简单数据请求,我相信大家心里会想,不就简单的数据请求吗,有能耐讲点难得...[捂脸].正所谓千呼万唤使出来,本着为用户考虑的角度,我决定讲点复…

微信小程序的组件web-view推出有一段时间了,这个组件的推出可以说是微信小程序开发的一个重要事件,让微信小程序不会只束缚在微信圈子里了,打开了一个口子,这个口子或许还比较小,但未来有无限可能. 简单思考 1.通过web-view嵌入网页功能开放,给微信小程序的发展带来无限的可能,有好,也有坏,但利大于弊.好处在于让微信的开放性更强,无论将来混合模式和还是纯H5都有更多的机会在微信这个大舞台有表演机会.坏处可能就是也打开了漏洞之门,会有更多鱼龙混杂情况出现,这对微信的生态圈是个挑战. 2.这个…

我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法. 本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有关页面间数据传递的更多方法. 文 | 小日子先生 在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题.在实际的开发过程中,可以通过以下几种方法来实现. 使用全局变量 全局变量实际上是定义了一个全局的对象,并在每个页面中引入. 在初始化代码的时候,小程序会读取一个 app.js 的文…

最近这段时间在写微信小程序,有一个页面需要动态修改 data 中的数据,而这里似乎是个坑. 1.正常修改 正常修改很简单,当触发 change 事件时,数据和页面都会同时发生改变.这个也不用多说,很简单的例子.   2.如何修改对象中某个属性值 当你想把下面代码中 human 中的 height 的值改成 178 时,直接用 this.setData ({human.height: 178}) 会报错.   这个时候可以先用字符串拼接属性名,然后用 [] 包裹起来,这里画上,待会可能要考.  …

swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函…

这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后台获取数据和从前端读取数据存放到数据库的两个过程, 大家可以参考.学习一下,看代码: 首先,在微信小程序的界面中,先设两个按钮:如下图所示: 代码如下: <button bindtap='houduanButton1'>点击发起请求</button> <view wx:for=&…

做为码农相信大家最近肯定都会听到微信小程序,虽然现阶段还没有正式开放注册,但大家可以还是可以开发测试. 到微信的WIKI(http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN)上 进行获取关于微信小程序的开发说明文档,开发文档还是比较详细和简单的,如果使用过如ReactJs,VueJs等框架的经验会很容易上手的. 如何开发微信小程序,首先需要下载微信小程序开发…

前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题:当我们使用POST方式请求时,后端无法获取数据,但使用GET方式便可以获取数据?? 解决办法: 设置请求的 header: header: { "Content-Type": "application/x-www-form-urlencoded" }, 例如:…

废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动端程序猿感觉甚是友好,加上有点前端基础就更是觉得入手很easy啦. 微信小程序的网络请求很便捷,直接调用就可以了.但最好还是根据需求,处理一些参数回调信息,进行二次封装,为整个小程序应用直接提供调方法接口岂不是更好? 利用网络请求的一贯思维,分三个回调:onStart:开始请求, onSuccess…

scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件 scroll-top Number 设置竖…

https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览…

这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢...) 首先在index.wxml中创建相关控件 <!--创建一个背景为蓝色的View,并且添加点击事件,输出启动日志-->  <view  bindtap="bindViewTap" class="myView">    <text clas…

map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.32…

微信小程序注册 1.直接搜索微信小程序,按照流程进行注册 2.如果有微信公众号,可以在公众号内部点小程序,进入注册流程 小程序中的概念 开发设置 在开发设置中获取AppID和AppSecret AppID:小程序在微信官方服务器的唯一标识(相当于主键,每个小程序的AppID都不同) AppSecret:小程序的秘钥,它是在调用微信接口的时候,需要传递的参数.(初次需要生成,生成之后可以重置.) 服务器域名:后台程序的域名,域名必须是公网可以访问的https的域名 wx50df37c3d7136e…

1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 method: "POST", data: { param1: '', param2: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function (…

前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端的开发. 编写mock数据文件: //mocklist.js var mocklist = { //创建订单 createOrder: { order_id: "201904011503001", use_voucher: "1", timeStamp: "1…

微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 避免报错,可以引入 regenerator 在根目录下创建 lib 文件夹,并将 https://github.c…

微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async-await 方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 需要解决的问题都有哪些: 1.截止到发文前小程序还不支持ES7的语法,我们到底能不能用? 2.撸的方式又是怎样的…

在微信小程序开发官网上有说明: 在开发者工具的右上角有详情选项,可以勾选不校验合法域名,之后就可以与本地ip进行通信了!…

目录 0. 背景说明 0.2 获取AccessToken 0.3 数据库查询 0.4 文件下载 2. 简单的封装 3. 简单测试 4. 参考文档 shanzm-2021年8月17日 17:14:24 0. 背景说明 试水小程序,实现访客登记,现有.NET程序需要获取该小程序的数据 0.2 获取AccessToken 调用绝大多数后台接口时都需使用 access_token 参考小程序文档:auth.getAccessToken 发送Get请求,获取AccessToken 接口: https://…

一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件中,用于记录想要购买的商品的数量.初始化的时候只有一个加号,点击加号以后出现数字和减号,并最后将数字传到组件外供外部使用. 2. 创建组件 首先在根目录创建components文件夹(或者你喜欢的地方),然后创建num-controller文件夹(我取的组件名字),在这个文件夹上点击右键新建一个co…

阅读demo有助于理解逻辑,而且demo源码中应该包含了框架开发人员想要表达的意思的精华,先从app.js着手来阅读. 附带贴下说明: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Da…

众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法.​​ 我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行watch对象中相对应的函数,达到监听效果. Object.definePr…

前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object object). 如果直接使用官方提供的个Api,那么每次在进行网络请求调用时,我们都要按官方文档上说的那样传递需要设置的请求参数,然后对不同的请求相应结果做不同的处理.但是前端同服务器端的接口请求中有大部分的请求参数以及响应结果处理都是很类似的,也就没有必要对所有请求代码都重新敲敲一遍,那么对原…