官方默认的Page初始代码为 var option = { /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 * */ onLoad: function (options) { } // ... 其他生命周期函数,以及自定义 方法 } Page(option); 其中: option中的函数,在运行期,this 指向 当前Page对象   扩展思路: 对Page页面提供的PageOption 再次包装 编码要求: option不再是一个独立定义的对…

为什么要使用页面全局参数:方便使用数据. 由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个页面全局参数.因为取数据使用this.xxx即可,中间不用加data,给页面全局参数赋值页方便,直接使用this.xxx=值即可,不需要使用setData() 页面全局参数与data同层级. Page({ /** * 页面的初始数据 */ data: { goodsList: [], total: 0 }, //接口要的参数 QueryParams: { query: '', cid: '',…

当微信小程序navigateTo传入参数是个object时,请使用JSON.strtingify将object转化为字符串,代码如下: wx.navigateTo({ url: '../sendCheckTea/sendCheckTea?current=' + JSON.stringify(object), }) 接收的时候使用json.parse将字符串解析成对象,代码如下: let data = JSON.parse(options.current) 需要注意的是,不要将参数object先使…

17,18年的时候,我当时主要开发小程序,那时候领导想看一下小程序的访问量,还有一些埋点的需求,于是我们的小程序就接入了阿拉丁统计. 阿拉丁的接入方式除了配置以外,主要就一行引入代码.官方要求将以下代码写在app.js第一行代码. const ald = require('./utils/ald-stat.js') 将代码放到app.js第一行代后,神奇的事情发生了,简简单单的一行代码,就可以统计到页面的访问量,分享量.而且每次触发分享都能在Network里面看到有接口请求.我出于好奇想知道它是…

小程序的每个页面都是独立的,每个页面都必须有 page.js 和 page.wxhl 文件,page.json 和 page.wxss 文件非必要文件,注意如果创建 page.json 则至少保证有一个对大括号,否则IED报错. page.js 管理该页面的逻辑事件.每个页面必须声明 Page() 方法. Page() 用来注册页面,其包含一下属性: data 用于初始化数据:data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,…

一 什么是page() page(),是一个函数,用来注册一个页面, 接受一个object参数, 指定页面的初始数据,生命周期函数,事件处理函数 等等 object参数说明: (1)data (object) 页面的初始数据 初始化数据 初始化数据将作为页面的第一次渲染, data将会以JSON的形式有逻辑层传至渲染层 所以其数据必须是可以 转成JSON的格式 (字符串,数字,布尔值,对象,数组) 渲染层可以通过WXML对数据进行绑定   初始化数据示例代码.png (2)onLoad(func…

请求例子:page/index/main?id=123,如何获取123? mpvue框架在onLoad(options)函数里面获取options.id即可. 用的框架不同,onLoad的函数不同.原生的是onLaunch.…

常规的开发过程中, 每个Page的逻辑中,要使用 util.js   WapRequest.js, 需要在每个页面中书写 require('/utils/WapRequest'); 略繁琐 在app.js 顶部 增加 const util = require('/utils/util'); const BasePageOptionClass = require('/utils/BasePageOptionClass'); const WapRequest = require('/utils/Wa…

前端发送post请求时,请求参数可以放在请求中,代码如下: function post(url, data, callback) { wx.request({ method: 'POST', url: app.globalData.serverApi + url, data: data, header: { 'content-type': 'application/json', 'Authorization': app.globalData.token }, success(res) { cal…

wx.navigateBack({//返回 delta:1 })   方法如下: 一. var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setData()方法,把数据存到上一个页面中去 prevPage.setData({ mydata: {a:1, b:2} }) 二. 回到上一页,在data里定义mydata,然后在onshow里 var pages = ge…

官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置.满足运营的需求,本文总结了微信小程序分享转发的多种用法,其中包括官方提供的页面自定义分享,使用隐式路由和页面配置实现的全局分享和全局+自定义的分享组合方式,希望能对需要实现分享多样化的同学有所帮助. 官方提供的自定义分享: 先看下官网介绍: 如上,只有定义了转发函数,才能分享页面,如此如果只需分享…

微信小程序账号与工具 在线文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发者账号注册 微信公众平台:https://mp.weixin.qq.com/ 小程序开发者账号注册:https://mp.weixin.qq.com/wxopen/waregister?action=step1 微信开发者工具 微信开发者工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html…

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理. 本文继续介绍这个微信小程序的控制器index.js的实现, 即MVC设计理念的C-Controller-控制器.不过严格意义上说,按照微信小程序官方文档里介绍的,微信小程序实际…

通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径.小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面.但是小程序目前不支持直接分享到微信朋友圈,而对我们来说,微信朋友圈又是一个很重要的吸引别人关注的入口,所以,得想办法把这个资源利用起来. 可能有的人已经知道,微信小程序支持通过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页面(如何生成这类常规二维码.小程序码,可参考<微信小程序之生成自定义参数小…

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理. 这个系列的下一步,会继续介绍这个微信小程序的控制器index.js的实现.在上一篇微信小程序视图源代码的讲解里,我们通过逐行讲解代码的方式,介绍了微信小程序视图的基本开发思路.但是讲控制器index.js, 仅仅采取静态…

开发环境:.NET MVC+ ORM框架(EF) 一.参考文档: 1.微信JSAPI支付官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1: 二.开发前准备: 1.必须申请微信公众平台(企业用户开通): 2.必须开通小程序平台,并与微信公众平台进行绑定: 3.必须开通微信商户平台,并妥善保管号商户号和商户密钥: (值得说明的是:微信商户密钥在拿到手之后,请首先重置三次以上,具体原因不清楚,…

先看看效果: 要实现这样的效果,需要下面3步: 1.下载 node 依赖包 miniprogram-ci,编写预览和上传功能 2. 登录微信公众平台, 下载项目的privateKey+添加代码上传IP白名单 3. 安装配置Jenkins Step1 下载 node 依赖包 miniprogram-ci,编写预览和上传功能, 在微信小程序项目下创建package.json,wxCI.js文件,package.json内容如下,执行yarn 或 npm install指令 ,安装项目运行时需要的依赖…

wx.request(OBJECT) wx.request发起的是 HTTPS 请求.一个微信小程序,同时只能有5个网络请求连接. 具体参数说明参看微信小程序官方文档-发起请求. 例: //当页面加载时,请求后台数据,并赋值给前台显示 Page({ data:{ new_list:[] }, onLoad:function(){ var that = this; wx.request({ url:'http://wxcms.com/getList', header:{ 'content-type…

微信小程序分享功能的实现方法有两种: 第一种 在page.js中实现onShareAppMessage,便可在小程序右上角选择分享该页面 onShareAppMessage: function () { return { title: '弹出分享时显示的分享标题', desc: '分享页面的内容', path: '/page/user?id=123' // 路径,传递参数到指定页面. } } 第二种 自定义按钮实现分享,在page中添加一个带有open-type=’share’的button标签…

本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏,欢迎关注! 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"><!--index.wxml--&g…

问题描述: 微信小程序:跳转页面时传参,参数过长导致参数丢失 跳转到文章详情页时,使用的文章链接e.currentTarget.dataset.id过长导致参数丢失 handleClickArticle: function (e) { wx.navigateTo({ url: '/pages/index/articleinfo/articleinfo?urllink=' + e.currentTarget.dataset.id }) }, 解决方案: 调用微信的API,将参数编码传送,解码接收,…

Google Flutter是一个非常优秀的跨端框架,不仅可以运行在Android. iOS平台,而且可以支持Web和桌面应用.在国内小程序是非常重要的技术平台,我们也一直思考能否把Flutter扩展到小程序端?我们团队之前已经开源了Alita项目(https://github.com/areslabs/alita),Alita可以把React Native的代码转换并运行在微信小程序平台.受此启发,我们认为同样是声明式UI框架的Flutter同样可以运行在小程序平台. 所以,我们发起了flut…

QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来认识一下页面.js文件的内容. Page 第一次创建的小程序项目,可以看到有index.js和logs.js两个文件,其中的文件内容结构包含了一个Page()的函数.Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等.每个页面都需有一个Page…

一.准备工作 微信公众平台接口调试工具 小程序的唯一标识(appid) 小程序的密钥(secret) 二.获取access_token 打开微信公众平台接口调试工具,在参数列表中输入小程序的appid和secret,点击检查问题,如果appid和secret正确,则可以返回正确的access_token结果(图中下方的红框) 三.生成微信小程序二维码 生成小程序二维码官方文档 https://developers.weixin.qq.com/miniprogram/dev/api-backend…

最近利用业余时间倒腾了一个微信小程序,主要目的是横向比较一些业界小程序平台的架构和做法.因为有在其他平台长期的开发经验,对于小程序的一些机制做了一些辩证的思考.例如,小程序的页面,其实不是一个页面,而只是一个方法构造器,甚至整个应用也都只是一个方法而已.这样的情况下,我们以前学到的很多面向对象的经验,例如继承之类的,在这里通通就没有用武之地了.不可否认这样对于一些新手来说,可能是一个不错的设计.但对于我们这种老炮来说,总是有一种要去改造它的冲动. 于是,我也就开始思考,看看能否对所有的页面做一个…

微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project.config.json中只需要修改appid 二.app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui, WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. 1.先在全局配置文件app.json中引入 "useExtendedLib&quo…

<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇文章第一天:人生若只如初见和第二天:你可能要抛弃原来的响应式开发思维零零散散地记录了一些微信小程序的细节,主要集中在UI方面.其中提到的解决方案只是笔者自身的一些探索,并非最佳实践,甚至不是笔者项目中最后采用的方案(最终方案会在后续文章里详细讲述).其实小程序的UI开发并非简短的两篇文章可以概括的,还有许多细…

微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通过参数data传数据, wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: e.detail.value }, header: { 'content-type': 'application/json' // 默认值 }, success (res…

通过第三方 JavaScript 库,扩展微信小程序框架功能. 扩展微信小程序框架功能(1)——Promise ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.112200)后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库. 扩展微信小程序框架功能(2)——Generator Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同. 扩展微信小程序框架功能(3)——函数功能增强…

微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function 这个报错是在将数组对象通过页面传值,传到指定页面时报的错. 是因为JSON.parse无法识别某些url中的特殊字符,所以报错. 因此解决这个报错的方法是将要传输的数据用 encodeURIComponent()函数(可把字符串作为 URI 组件进行编码) 先进行编码,传输过去后再通过decodeURIComponent()…