js怎么使用小程序

Ⅰ 微信小程序如何使用全局js

1.要注意的是必须要用mole.exports导出要调用属性或方法；
2.使用的时候用var api = require('../../utils/api.js'); 加载代码，然后使用api.SYNC_TABLE_URL 直接调用
3.调用方法也差不多。

Ⅱ 小程序 使用upng.js 把小程序选择的图片转换为base64

有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台

小程序有专门的选择图片接口，

wx.chooseImage(OBJECT)

但是这个只是返回一个图片的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，

再通过插件upng.js插件实现图片转base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到项目中

2. 在pages下的页面js文件中导入

var upng = require('../../utils/upng.js');

这里只需要导入npng.js ，pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位图片展示 变量imgbase64

need-to-insert-img

4. 添加js点击chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wx.getStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths;

                // 获取文件路径

                var filePath = tempFilePaths[0];

                // 1. 绘制图片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 获取图像数据， API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png编码

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64编码

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 实现

need-to-insert-img

need-to-insert-img

tips

画布画的图片的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

wx.getImageInfo(OBJECT)

获取长和宽

相关链接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台

小程序有专门的选择图片接口，

但是这个只是返回一个图片的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，

再通过插件upng.js插件实现图片转base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到项目中

2. 在pages下的页面js文件中导入

var upng = require('../../utils/upng.js');

这里只需要导入npng.js ，pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位图片展示 变量imgbase64

4. 添加js点击chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wx.getStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths;

                // 获取文件路径

                var filePath = tempFilePaths[0];

                // 1. 绘制图片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 获取图像数据， API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png编码

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64编码

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 实现

tips

画布画的图片的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

获取长和宽

相关链接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner

Ⅲ 微信小程序wxs的使用（当页面数据渲染前添加js操作)

小程序的wxs功能可以让wsmxl可以调用和编写js,基本上wxs和JS无关系,只是语法形式很相似。

如下写了两个关于时间的函数，并将它们导出，

<wxs mole="m1">

var getMax = function(flightDate) {

    var now = getDate().getDate();

    var flDate = getDate(flightDate).getDate();

    if( now < flDate ){

      return '+1';

    }else{

      return '';

    }

}

var formartTime = function(flightDate,format){

  if(flightDate){

    var realDate = getDate(flightDate);

    function timeFormat(num) {

      return num < 10 ? '0' + num : num;

    }

    var date = {

      "Y": timeFormat(realDate.getFullYear()),

      "M": timeFormat(realDate.getMonth() + 1),

      "d": timeFormat(realDate.getDate()),

      "h": timeFormat(realDate.getHours()),

      "m": timeFormat(realDate.getMinutes()),

      "s": timeFormat(realDate.getSeconds()),

      "q": Math.floor((realDate.getMonth() + 3) / 3),

      "S": realDate.getMilliseconds(),

    };

    if (!format) {

      format = "yyyy-MM-dd hh:mm:ss";

    }

    if( format == 'hh:mm' ){

        return date.h+':'+date.m;

    }else{

        return date.h+':'+date.m;

    }

  }else{

    return false;

  }

}

mole.exports.getMax = getMax;

mole.exports.formartTime = formartTime;

</wxs>

可在页面添加如下使用：

m1.formartTime(）;  m1.getMax(）;

Ⅳ 怎样用js开发微信小程序

微信小程序之js
如果你想开发一款微信小程序学会微信小程序的js是必须要精通的，只要你html+css+js的基础打的好在来全力的学习微信小程序js，之后在前端开发上就没有什么问题了，但是微信js是需要花精力去学习的，可以买一本参考书或者了解下微信小程序的api都是可以快速的帮助你介入开发的队列。

Ⅳ 怎么用js做一个小程序

javascript是针对web和浏览器的，也就是写在html文件中让浏览器解释和执行的代码，所以想写直接写到html文件中然后用浏览器打开就可以实现了

Ⅵ 微信小程序 js 如何点击进入新的界面

标签跳转相当于HTML的a标签

<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

编程式跳转：

wx.navigateTo({url: 'test?id=1',})

详情查看微信官方文档：

navigator 导航标签组件网页链接

navigateTo API:网页链接

Ⅶ 在小程序的其他JS文件中均可以使用全局的什么方法获取小程序实例

在小程序的其他JS文件中均可以使用全局的App(OBJECT)方法获取小程序实例。js文件是比较特殊的，它是微信小程序的入口文件，掌控整个小程序的生命周期，同时有一些全局的属性、变量也存放在这个文件中。

Ⅷ 如何在微信小程序js文件注释快捷键

1、JS的注释一般是双斜杠 // 或者是 /**/ 这样的块注释；而.json是配置文件，其内容必须符合JSON格式，所以文件内部不允许有注释。

2、app.json是全局配置文件，微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页 。

Ⅸ 怎样使用微信小程序的第三方js库

方法一：rpn.js：使用rpn.js实现eval函数功能
操作链接：网页链接

方法二：
（1）使用Underscore.js：操作链接：网页链接

（2）使用Immutable.js：操作链接：网页链接

（3）使用UUID、Base64、Chance：操作链接：网页链接

扩展微信小程序框架功能（1）——Promise

ES6 对 Promise 有了原生的支持，但微信开发者工具更新版本（0.11.112200）后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。

扩展微信小程序框架功能（2）——Generator
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

扩展微信小程序框架功能（3）——函数功能增强
Underscore.js 和 Lodash 是最常用的JavaScript库。

扩展微信小程序框架功能（4）——Immutable.js
Immutable.js 是 Facebook 开发的不可变数据集合。Immutable
Data（不可变数据）一旦创建就不能被修改。通过使用Immutable
Data，可以更容易的处理缓存、回退、数据变化检测等问题，应用开发更简单。

扩展微信小程序框架功能（5）——Rex
Rex 是 JavaScript 状态容器，提供可预测化的状态管理。

扩展微信小程序框架功能（6）—日期时间
Moment.js是一个JavaScript的日期、时间处理工具类，其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用，也可以在Node.js中。

扩展微信小程序框架功能（7）——正则表达式
XRegExp 是一个开源的 JavaScript库，提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库，支持附加语法、标志以及方法。

扩展微信小程序框架功能（8）——Xml处理
x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。

扩展微信小程序框架功能（9）——加解密
node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。

扩展微信小程序框架功能（10）——测试辅助
Chance是一个 JavaScript 随机数生成工具。Mock.js可以生成随机数据，拦截 Ajax 请求。

方法三：moment
操作链接：网页链接