fwq

本篇文章给大家带来的内容是关于微信小程序实例：如何引入外部js的文件（图文），有需要的朋友可以参考一下，希望对你有所帮助。 如何引入一个外部的js文件，既utils文件夹的用处，其实步骤很简单： 1：准备好外部想要引入的外部文件，命名为util.js,并且填充固定的文件内容（一般是固定的库） 2：打开util.js ，继续填写重要内容将要使用的方法用module.exports给暴露出来，如图所示（我暴露了一个方法： imageUtil，若有很多方法，则用json形式） module.exports = {   imageUtil: imageUtil } 登录后复制 3：将外部js放在指定的文件夹utils里（utils 规定存放js库和数字格式化文件） 4：在想要用到这个方法的js里面 require这个js，然后调用即可（我在index.js文件里面想要调用外部文件util.js，则先要获取应用实例 ：var imageUtil = require(‘../../utils/util.js’);调用即可。）  相关推荐： 以上就是微信小程序实例：如何引入外部js的文件（图文）的详细内容，更多请关注米云其它相关文章！

input输入框组件说明: 本文介绍input 输入框的各种参数及特性。 input输入框示例代码运行效果如下： 下面是WXML代码： [XML] <view> type：有效值：text 感觉没什么区别 <input><input><input><input> password： <input><input> placeholder： <input> disable: <input><input> 最大长度： <input><input><input></view> 登录后复制 下面是WXSS代码： [JavaScript]  .content{   border:1px black solid;   margin: 10px;   font-size: 10pt;   padding: 5px; } input{   border:1px red solid;…

小程序中push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。push遇到数组参数时，把整个数组参数作为一个元素。 语法 arrayObject.push(newelement1,newelement2,....,newelementX) 登录后复制 push和concat二者功能很相像： var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push(5, 6); arr = arr.concat(7); arr = arr.concat([8, 9]); arr = arr.concat(10, 11); for(var i in arr){   console.log(i+"-----"+arr[i]); } 登录后复制 打印结果如下： index.js [sm]:180 0—–1index.js [sm]:180 1—–2index.js [sm]:180 2—–3,4index.js [sm]:180 3—–5index.js [sm]:180 4—–6index.js…

解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图: 整个功能基于实现，首先添加画布组件，并设定样式 <!--index.wxml--> <view>  <canvas></canvas></view> 登录后复制 .gesture-lock {   margin: 100rpx auto;   width: 300px;   height: 300px;   background-color: #ffffff; } 登录后复制 手势解锁实现代码在gesture_lock.中(完整源码地址见末尾)。 初始化   constructor(canvasid, context, cb, opt){     this.touchPoints = [];     this.checkPoints = [];     this.canvasid = canvasid;     this.ctx = context;     this.width = opt &amp;&amp; opt.width || 300; //画布长度     this.height = opt &amp;&amp; opt.height || 300; //画布宽度     this.cycleNum = opt &amp;&amp; opt.cycleNum || 3;     this.radius = 0; //触摸点半径     this.isParamOk = false;     this.marge = this.margeCircle = 25; //触摸点及触摸点和画布边界间隔     this.initColor = opt &amp;&amp; opt.initColor || '#C5C5C3';       this.checkColor = opt &amp;&amp; opt.checkColor || '#5AA9EC';…

这次给大家带来Event emitter的监听事件，使用Event emitter监听事件的有哪些，下面就是实战案例，一起来看一下。 什么是 Event Emitter? Event emitter 听起来只是触发一个事件，这个事件任何东西都能监听。 想象一下这样的场景，在你的异步代码中，去“呼叫”一些事件的发生，以及让你其他部分都要听到你的“呼叫”并且注册他们的想法。 为了不同的目的，对于 Event Emitter 模式有大量不同的实现，但是基本的想法是为了给一个框架提供事件的管理以及能够去订阅他们。 在这里，我们的目标创建属于我们自己的 Event Emitter 去理解背后的秘密。所以，让我们看一下下面的代码是怎么工作的。 let input = document.querySelector("input[type="text"]"); let button = document.querySelector("button"); let h1…

摘要： 在智能手机软件的装机量中，天气预报类的app排在比较靠前的位置。说明用户对天气的关注度很高。因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排。跟着本文开发一个“微天气”小程序，方便微信网友随时查看天气。 引言：在智能手机软件的装机量中，天气预报类的APP排在比较靠前的位置。说明用户对天气的关注度很高。因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排。跟着本文开发一个“微天气”小程序，方便微信网友随时查看天气。接下来两天小编将同您一起开发一个“微天气”小程序，本文首先向大家介绍“微天气”的API与界面代码编写。本文选自《从零开始学微信小程序开发》。 　　在一套软件系统中，微信小程序通常是作为前端来使用的，一般还需要有后端的系统提供支持，这就需要开发者（或运营者）购买云服务器（或有自己的独立主机），将后端系统部署其上。对于很多初学者来说，这些条件不容易达到。但我们可以选择使用在线免费API接口，开发者只需要编写好前端系统（微信小程序），在前端系统中直接调用这些免费API即可获得相应的数据。 1 天气预报API 　　要开发天气预报类APP，首先要考虑的问题就是天气预报数据的来源。有了天气预报的数据来源，才能按需要在微信小程序中显示出来。其实，微信小程序就是一个显示天气信息的前端系统，而天气预报API就是后端系统。由于天气预报API可以在网上免费获取，因此，本案例中开发者不需要开发后端系统，只需要根据API的要求进行访问即可。 中华万年历的天气预报接口 　　中华万年历的天气预报接口地址如下：　　wthrcdn.etouch.cn/weather_mini?city=北京　　该接口很简单，只需要给出城市的名称即可，接口返回的数据也是JSON格式，具体形式如下所示： {    "desc": "OK",    "status": 1000,    "data": {        "wendu": "15",    "ganmao": "昼夜温差较大，较易发生感冒，请适当增减衣服。体质较弱的朋友请注意防护。",        "forecast": [{            "fengxiang": "北风",            "fengli": "3-4级",            "high": "高温 14℃",            "type": "晴",            "low": "低温 3℃",            "date": "19日星期六"         },         {            "fengxiang": "无持续风向",            "fengli": "微风级",            "high": "高温 4℃",            "type": "雨夹雪",            "low": "低温 -1℃",            "date": "20日星期天"         },         {            "fengxiang": "北风",            "fengli": "3-4级",            "high": "高温 0℃",            "type": "小雪",            "low": "低温 -7℃",            "date": "21日星期一"         },         {            "fengxiang": "北风",            "fengli": "3-4级",            "high": "高温 -3℃",            "type": "晴",            "low": "低温 -9℃",            "date": "22日星期二"         },         {            "fengxiang": "无持续风向",            "fengli": "微风级",            "high": "高温 -3℃",            "type": "多云",            "low": "低温 -10℃",            "date": "23日星期三"         }],        "yesterday": {            "fl": "微风",            "fx": "无持续风向",            "high": "高温 10℃",            "type": "霾",            "low": "低温 6℃",            "date": "18日星期五"         },        "aqi": "40",        "city": "北京"     } } 登录后复制 　　可以看出，以上返回的JSON数据很多，有当天的温度wendu、感冒描述ganmao，还有forecast数组中保存的最近5天的天气数据，以及yesterday中保存的昨日天气数据。 2 界面设计 　　本案例要求界面简单，尽量在一个页面中显示当前天气、最近五天的天气，同时，还要提供按城市名称查询的功能，可显示出所查询城市的天气预报信息。UI设计如下。　　　　　　　　　　　　　　　　　　　　 在图中，上方显示所查询城市的名称，右侧显示当前日期。接着以较大字号显示查询城市的温度和感冒描述。下方排着5个小卡片显示最近5天的天气信息，最下方接收用户输入要查询的城市名称，单击“查询”按钮即可查询指定城市的天气预报信息。　　当刚打开该小程序时，由于用户还没有输入查询城市名称，需要设置一个默认城市名称，以方便显示初始的天气预报信息。…