在微信小程序开发过程中,会需要跳转到外部链接,微信提供了 <web-view>组件供我们使用. 为减少重复代码,一般会将这个功能单独抽取为一个页面供大家使用: <template> <!-- 通用 web-view note:在iOS中,若存在JSSDK接口调用无响应的情况,可在<web-view/>的src后面加个#wechat_redirect解决 --> <web-view :src="url"></web-vie

背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面. 解决方案 首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去:,经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能. 在寻找资料时,发现可以间接的触发一个unl

全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, 群id lang 当 type="user*" 时生效,以哪种语言展示 userInfo <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-

微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view 在小程序后台添加业务域名,只解析业务域名中的url网页地址的. 域名是需要ICP进行备案的. 用ftp上传文件验证域名的所有权 登录官方小程序后台,选择设置,选择开发设置,中间有个业务域名,添加业务域名后,小程序才能调用组件打开限定域名内的网页. <web-view src="页面地址">名称(可省略)</web-view> w

1.ES6的基本用法 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰.更像面向对象编程的语法而已. class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x +

在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个富文本转化插件wxParse,方便我们使用,前人种树后人乘凉,我们使用它来解析HTML就很方便了,这对于我们在后端已经完成的一些HTML内容,展示在小程序里就非常不错. 这个插件的Github地址如下:wxParse-微信小程序富文本解析组件,官方称它支持支持HTML及markdown解析,我这里主

提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态. 在微信小程序中,我们大致会涉及到以下三类登录方式: 自有的账号注册和登录 使用其他第三方平台账号登录 使用微信账号登录

不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组件的页面,所以,先在pages文件夹下面新建classic页面,然后在项目根目录下新建component文件用于存放组件,并在该文件夹下面新建like组件:    这里建议在新建页面的时候,先新建存放页面的文件夹,然后编辑器中鼠标右击该文件夹,然后选择新建page.新建组件的时候,也是先新建存放组件

全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> {{message}} <view> index.js Page({ data: ({ message: 'Hello' }) }) // 组件属性 // data中的数据绑定到微信小程序组件上 <view id="item-{{id}}"></view&

全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链接 open-type 跳转方式 delta 当 open-type 为 'navigateBack' 时有效,表示回退的层数 app-id 当target="miniProgram"时有效,要打开的小程序 appId path 当target="miniProgram"

微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() 必须在 app.js 中调用,必须调用且只能调用一次.不然会出现无法预期的后果. onLaunch 生命周期回调-监听小程序初始化 小程序初始化完成时(全局只触发一次) onShow 生命周期回调-监听小程序显示 小程序启动,或从后台进入前台显示时 onHide 生命周期回调-监听小程序隐藏 小程序

在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({ index1: e.detail.value }) 比如在函数里面修改数据 bindFaChange1: function (e) { this.setData({ index1: e.detail.value }) } 但是当我们通过wx.request请求网络数据成功后绑定数据时候报以下错误 this.setData is not a function 代码如下: doCalc:function(){ w

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

微信小程序中各个页面调用公用的js 在util.js文件中 // 跳转哪里 function go(where) { wx.reLaunch({ url: where, }) } // 将方法暴露出去,在其他页面才可以调用 module.exports = { go: go } 在其他页面调用 // 引入util.js var utils = require('../../utils/util.js') Page({ go: function(e) { var url = e.currentTa

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas

本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处理异步请求(异步操作),如何解决? 如何正确使用store的三大核心方法(getStore dispatch subscribe)? redux并不是react专属,所以他可以在任何地方使用,小程序也不例外.解决上面三个问题就可以了. 问题一: 如何在小程序中引入redux状态管理库,及它相关的插件

login.wxml <view> <!-- <image src="./88.png"></image> --> # 在当前目录下导入图片 <image src="../../images/00.jpg"></image> # 导入根目录的文件下的图片 <view class="userinfo"> <input type="text"

本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:6

简介 相信看到这篇文章的同学,都已经对微信小程序的api文档有所了解了,也都经历了微信小程序api回调函数嵌套的痛苦,才会想要通过Promise解决回调地狱这个问题,我下面就直接介绍怎么在小程序中使用promise. 历史问题 很多同学肯定看到一些介绍微信小程序中使用Promise的文章,告诉你说微信小程序不支持Promise,需要自己引入es6-promise,或者需要使用一些第三方的promise,就我看到的如bluebird等,老版本的微信小程序应该是不支持es6中的Promise的,但是

本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我们公司是阿里云地址是会改变的,所以需要动态的从后台获取配置 var client = hprose.Client.create(app.globalym, ["get_oss_config"]); client.get_oss_config(******, *****).then(func