下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定义封装请求的方法 var Promise = require('../libs/es6-promise.min') function httpsPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function…
工具库的创建与使用 创建一个common文件夹 在common文件夹中创建一个utils文件夹 在utils文件夹中创建util.js // 工具 function tool() { console.log('i am a tool function.'); } module.exports = { tool: tool } 在具体的页面js中调用 首先要引入工具文件 const util = require('../../common/utils/util'); 然后在具体的位置使用即可. o…
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小程序到鸿蒙js开发>系列文章合集 除轻量级智能穿戴设备,现鸿蒙支持的手机.汽车.TV.手表.平板等属于富鸿蒙,在JS语言的项目中也有Java模块,并提供了JS跨语言调用Java方法的技术.现需要实现查看商品评论时,统计出长评.中评和短评的比例,这里将评论数据请求来后调用Java进行计算. JS调用Jav…
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…
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加载更多 如果在list中需要展示的数据非常多,那么一次性获取全部数据并显示,对于后端服务器和前段渲染的性能都是很大的负担,浪费资源且页面加载速度会很慢. 在网页端做分页普遍是用户点击"上一页","下一页"进行翻页,而移动端设备一般是在滑动到页面底端后加载下一页数据,并将…
今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also…
https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js====================== //封装的函数function GetUserInfo2018() { console.log("获取用户信息8888")} function count(str) { console.log(str)} //转化成小程序模板语言 这一步非常重要 不然无法正确调用mod…
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&wx.navigateBack() 4.router.clear()&wx.reLaunch() 5.项目实践 6.<从微信小程序到鸿蒙js开发>系列文章合集 在项目中,页面之间的路由跳转是十分普遍的.鸿蒙JS开发提供了四种页面跳转的方式(轻量级智能穿戴仅支持replace()),之前的帖子…
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打开app可以自动登录,就需要将用户信息存储到缓存中. 鸿蒙JS开发模式提供了操作数据缓存的API,首先需导入storage模块. import storage from '@system.storage'; 添加缓存的API为storage.set( ),指定key和value,在用户登录成功后将用…
接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车,加入购物车和立即购买的逻辑实现:购物车结算功能完善(需添加收货地址才能结算,并完善新增.编辑.删除地址相关操作):在分类模块实现了商品的分类展示以及不同分类对应的数据流显示,以及进入详情的逻辑操作.请不要吝啬你的发财手帮我star或转发一下,谢谢了.下面附上目前的效果:(切图自己抠的,请见谅.) 附上源码地…
简介 相信看到这篇文章的同学,都已经对微信小程序的api文档有所了解了,也都经历了微信小程序api回调函数嵌套的痛苦,才会想要通过Promise解决回调地狱这个问题,我下面就直接介绍怎么在小程序中使用promise. 历史问题 很多同学肯定看到一些介绍微信小程序中使用Promise的文章,告诉你说微信小程序不支持Promise,需要自己引入es6-promise,或者需要使用一些第三方的promise,就我看到的如bluebird等,老版本的微信小程序应该是不支持es6中的Promise的,但是…
目录: 1.登录模块 2.注册模块 3.系列文章导读 牛年将至,祝大家行行无bug,页页so easy- 在微信小程序中,提供了form组件,可以将input.picker.slider.button等全部放在form中,并设置name属性实现类似html的表单提交功能. 鸿蒙js目前是没有form组件的,因此我们需要在提交时手动获取输入框.选择框等的值,自行构建数据对象. 1.登录模块 这里接着上一篇,通过dialog组件实现了模态登录和注册的窗口.登录窗口的效果如下: 每一行中,放置图标和i…
前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获取不到动态设置的global数据了.因为我要获取小程序的unionid以及通过unionid去获取微信的openId,并且共享数据,最开始我是通过storage来做数据共享的,后来测试发现storage存在莫名被清空的情况,后来转用globalData来做数据共享,查了下,是因为app.js中的on…
一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1:3000/info?page=1 查询接口:http://127.0.0.1:3000/search?word=李 详情接口:http://127.0.0.1:3000/xiangqing?id=2 const express = require("express"); const ap…
摘要: 请求时间太长,影响用户体验,使用 Fundebug 监控慢请求. Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报.时隔一年,微信小程序插件已经更新到 1.3.1, 而且提供了一个非常有用的功能,支持监控 HTTP 慢请求.对于轻量级的性能分析,可以说已经够用. 本文我们以一个天气微信小程序为例(由bodekjan开发),来演示如何监控慢请求.bmap-wx.j…
在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试…
目录: 1.可滚动区域 2.list + list-item 3.list + list-item-group + list-item 1.可滚动区域 在许多场景中,页面会有一块区域是可滚动的,比如这样一个简单的每日新闻模块: 上面的新闻类型是一块可横向滚动的区域,下方新闻列表是一块可竖向滚动的区域.在微信小程序中,使用scroll-view组件即可实现.那么在鸿蒙js组件中,想要实现可滚动的区域,则是使用list组件.list仅支持竖向滚动,横向滚动要用tabs,将在下篇博客讲解. 2.lis…
目录: 1.swiper轮播图 2.image-animator幻灯片 3.marquee跑马灯 4.nginx动静分离 1.swiper轮播图 微信小程序的swiper组件中只能放置swiper-item,而鸿蒙js的swiper组件中可以放置除list之外的任意组件,功能更强大.除之前讲过用swiper结合自定义tabbar实现底部菜单分页功能,swiper最常用的就是首页的轮播图了. swiper的属性可见官方文档(https://developer.harmonyos.com/cn/do…
微信小程序中,在微信官方开发文档我们可以知道 小程序的目录结构 . 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app =…
1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="number" placeholder="请…
问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之类的,小程序再通过标识替换回原本的字符(感觉就不是很靠谱...). 后来发现真的不靠谱,首先每篇文章样式可能都不一样,需要很多对应的字典,即使是这样大概预估了下,也减少不过10多k左右.唉,还是面向百度编程吧,看看有没有什么别人写好的模块可以用一下. 然后就找到了pako.js,具体实现是本地gzi…
问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'application/json'用在get请求中没问题,但是在POST请求中出现了这个问题. 修改wx.request()的请求头中的content-type: header: { 'content-type': 'application/x-www-form-urlencoded', }, 这样就解决问题了…
为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接接口开发速度是快的,可是,一旦对接的接口多了起来,这样简单,直接的方法出现了很多缺陷. 难以维护.域名被换或者接口名被换,修改接口名得一个个文件找,而且可能不清楚有多少文件调用了需要修改的接口,导致效率低下 难以管理.无法了解到底用了哪些接口,难于统一修改,除非一个个找出了,并其归纳 代码重复.有些…
前言 最近都在研究小程序了,我可以的! 需求 之前都是用vue来开发项目的,接口模块我特意封装了一下.感觉也可以记录一下 小程序的接口虽说简单,但是重复调用那么多,显得不专业(一本正经的胡说八道) 还有一篇,小程序遇到了的那些坑和小技巧)待续 一.小程序接口请求流程 简单的画了一个流程图 二.域名配置 一定要配置https,小程序上配置的域名必须是域名备案的,还有一定服务器要TLS1.2以上 三.打开微信开发者工具,打开你的项目,点开详情.确认一下域名是否一一匹对.不然会编译失败的哦 四.在你的…
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. <view>{{ msg }}</view> <button bindtap="clickMe">点击我</button> 点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bin…
巧妙的封装 暴露一个访问地址xapp.config.js module.exports = { api_host: `https://a.squmo.com/yizu` } 继续引入,加暴露api.config.js const xapp = require('./xapp.config.js'); // 注册接口 module.exports = { GetAddr: `${xapp.api_host}/GetAddr/index` ... } 继续暴露,加request处理 method.j…
1.小程序的生命周期-App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App({ onLaunch: function () { console.log('App Launch') this.initCloud(); }, onShow: function () { }, onHide: function () { console.log('App Hide') }, globalData: { hasLogin: fals…
前几天遇到一个朋友求助,实现购物车的相关功能,一时心血来潮,想着抽空搭建一个小程序电商平台(虽然网上有很多,但还是自己撸一遍才是王道),所以在工作之余整了一个仓库,今天提交了第一次代码,已经满足了朋友的需求,后续我会完善其他平台.现在项目里面的数据是我用静态JS模拟的,以后有可能会换其他方式,欢迎志同道合的小伙伴们一起探讨围观,如果觉得对你有所帮助,请不要吝啬你的发财手帮我star或转发一下,谢谢了.下面附上目前的效果:(切图自己抠的,请见谅.)   上项目地址:https://github.c…
//小程序 Page({ data: { items: [] }, onLoad: function(options) { this.setData({ items: [1,2,3] }) } }) //Vue new Vue({ data: { items: [] }, mounted () { this.items = [1, 2, 3] } }) <!--小程序--> <text wx:for="{{items}}">{{item}}</text&g…
config.js const config = { base_url_api : "https://douban.uieee.com/v2/movie/", } export {config} http.js import { config } from "../config"; class HTTP { requset({ url, method = "GET", data = {} }) { const promise = new Prom…