前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showModa

在app.js中这样引入 import '@src/utils/mixins' mixins函数如下 /** * 封装类似vue的混入功能 */ let native = Page Page = (obj) => { let {mixins = []} = obj let merge = new Merge() Reflect.deleteProperty(obj, 'mixins') let pageData = mixins.length <= 0 ? obj : merge.start(

这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail(error){ } }) 官方的方法用起来很麻烦,和我们之前习惯用localStorage.getItem看这个就很别扭,你也一样对吧,别问我怎么知道的  你来这文章的时候你肯定就是不习惯官方的,没关系,我给你封装好了. 第一步.根目录新建utils目录,目录内新建一个utils.js的文件 第二步.复制下

微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </view> <button bindtap="RequestData" value="Button">Button</button> 主要是一个按钮,点击后将请求的数据写入到textarea中 js文件: Page({ data:{ textd

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

20180511微信小程序正式关闭原先getUserInfo的逻辑 不再允许自动弹出授权框. 方法一: index.wxml(准备一个用于给用户授权的页面,我这里直接用了一个全屏按钮) <view class='warp' hidden='{{eye}}'> <button open-type="getUserInfo" hover-class='none' bindgetuserinfo="getUserInfoFun">.</but

wxParse是一个微信小程序富文本解析组件.现在小程序里面自带了一个<rich-text>组件也能解析富文本,但是表现不尽人意.所以我还是采用的wxParse来解析富文本的. wxParse git地址:https://github.com/icindy/wxParse.可以先稍作了解.下面具体讲一下我实现的步骤: 1.下载 wxParse,解压,将 wxParse 放入小程序中. 如下图: 2.在 你需要引用这个插件的 wxml 文件中引用  wxParse.wxml //路径根据你实际情

小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存在歧义).在此与诸君分享,还望不吝赐教. 0.小程序框架结构就不多赘述有兴趣的童鞋可以移步我的博客查看这篇文章,现在要讲的是开发中经常需要用到的,节点查询的API - wx.createSelectorQuery(). 1.使用方法:(从文档上粘来的栗子,只不过我在上边添加上了注释

在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) request.js var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //调用url配置文件 文件config.js是对项目的所有url进行封装 便于管理 const CONFIG = require('../..//utils/config.js')

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

在我编写公司小程序的过程中,有一次在网页端添加了一张图片,结果在小程序端访问失败了,究其原因,竟然是因为该图片名称中有一个“&”符号,网页端添加后,自动转义成了“&”存储到了数据库.当然,这种格式如果是在HTML去访问图片地址,会自动在转义成“&”,但是小程序的WXML并没有这种功能,所以这就需要我们在小程序端自行操作进行转义了. 首先,明确一下会自动转义存储的常用的特殊字符有哪些: 字符 转义字符 " " & & < < >

生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js,app.wxss,app.json三个文件 这是小程序的全局文件,app.js是小程序逻辑 ,app.json是小程序公共设置,app.wxss是小程序公共样式表 在app.js文件中 , 定义了一些生命周期方法 , onLaunch,onShow,onHide,onError,以及任意开发者添加

目录 全局数据共享 Mobox npm安装及其注意事项 小程序对 npm 的支持与限制 npm 依赖包的安装与使用 Mobox 1. 全局数据共享 2. 小程序中的全局数据共享方案 3. 使用mobx 组件方法共享 behaviors 1. 什么是 behaviors 2. behaviors 的工作方式 3. 创建 behavior 4. 导入并使用 behavior 5. behavior 中所有可用的节点 6. 同名字段的覆盖和组合规则 全局数据共享 Mobox 原生小程序开发中我们可以通

  https://github.com/Tencent/weui-wxss/ 下载地址用于小程序的https://github.com/Tencent/weui   下载地址用于H5    运用示例在下载文件的文件夹 weui-wxss-master\dist\example目录下   小程序全局用法 在app.wxss用@import "weui.wxss" 另外,小程序也有许多的框架 如mpvue 等

第一步,在page下新建component文件,放你封装的小组件,和vue里的component差不多 第二步,在需要使用的组件的.json文件中添加usingComponents 第三步,在页面中引入组件index.wxml <!--pages/index/index.wxml--> <view class='address' bindtap='onChangeAddress'> <template is="mars" data="{{sele

之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request({ url: HOST + req.uri, data: req.param, header: { "content-type": "application/x-www-form

方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1.app.js文件,定义全局变量 /定义全局变量 globalData:{ userInfo:null, sysInfo:null, windowW:null, windowH:null } 设置全局变量 //举例获取手机信息 getSys:function() { var that = this; // 这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-v

1.依赖 a.jQuery b.angularjs 2.page.js文件 1 var Page = function (options) { 2 var myApp = angular.module('myApp', []); 3 myApp.controller('myCtrl', function ($scope) { 4 $scope.setData = function (obj) { 5 for (let key in obj) { 6 eval("$scope." + k

操作反馈modal:官方文档 Demo Code: Page({ data: { modalHidden: true, modalHidden2: true }, modalTap: function(e) { this.setData({ modalHidden: false }) }, modalChange: function(e) { this.setData({ modalHidden: true }) }, modalTap2: function(e) { this.setData(

1.xhtml代码 长按保存: <view class="img" catchlongpress='baocun'></view> 2.Js代码 baocun: function (e) { wx.showModal({ title: '提示', content: '确定要保存这张图片吗?', success: function (res) { if (res.confirm) { console.log('用户点击确定') wx.getImageInfo({

1.util-util.js //封装接口 let baseURL = 'http://127.0.0.1:3000/'; //接口路径 let request = function (url, options = {}) { let myUrl = `${baseURL}${url}`; // 处理method,data,params=> 查询字符串 // 如果有请求头 // 合并对象data // 如果params 添加查询字符串参数 //接口的参数 if (options.params)