手册

目录

绘图
微信小程序API 绘图接口(reference)、方法大全 微信小程序API 绘图 微信小程序API 绘图介绍(如何在Canvas上画图) 微信小程序API coordinates(Canvas 坐标系) 微信小程序API gradient(如何绘制渐变效果) 微信小程序API wx.createCanvasContext(canvasId)(绘图上下文) 微信小程序API 绘图·绘制画布 drawCanvas (不推荐使用) 微信小程序API 绘图·导出图片canvasToTempFilePath(OBJECT) 微信小程序API 绘图·设置填充样式setFillStyle 微信小程序API 绘图setStrokeStyle(设置线条样式) 微信小程序API 绘图setShadow(设置阴影样式) 微信小程序API 绘图createLinearGradient(创建线性渐变) 微信小程序API 绘图createCircularGradient(创建圆形渐变) 微信小程序API绘图addColorStop(创建颜色渐变点) 微信小程序API 绘图setLineCap(设置线条端点样式) 微信小程序API 绘图setLineJoin(设置线条交点样式) 微信小程序API 绘图setMiterLimit(设置最大倾斜) 微信小程序API 绘图rect创建矩形 微信小程序API 绘图fillRect(填充矩形) 微信小程序API 绘图strokeRect(画一个矩形,非填充) 微信小程序API 绘图clearRect(在给定的矩形区域内,清除画布上的像素) 微信小程序API 绘图fill(对当前路径进行填充) 微信小程序API 绘图stroke(对当前路径进行描边) 微信小程序API 绘图beginPath(开始一个路径) 微信小程序API 绘图closePath(关闭一个路径) 微信小程序使用moveTo把路径移动到画布中的指定点,不创建线条 微信小程序中使用lineTo方法增加一个新点 使用arc()方法在微信小程序canvas中画弧线 在微信小程序绘图API中创建二次方贝塞尔曲线 在微信小程序API绘图中创建三次方贝塞尔曲线路径 在微信小程序中调用scale方法对横纵坐标进行缩放 微信小程序API 绘图对坐标轴进行顺时针旋转 微信小程序canvas中使用translate对坐标原点进行缩放 微信小程序API 绘图setFontSize(设置字号) 微信小程序绘图API中使用fillText在画布上绘制被填充的文本 微信小程序API中,使用drawImage完成绘制图像,图像保持原始尺寸 微信小程序API 绘图中使用setGlobalAlpha设置全局画笔透明度 微信小程序save/restore(保存和恢复绘图上下文) 微信小程序API 绘图·draw(进行绘图) 微信小程序API 绘图·getActions(不推荐使用) 微信小程序API 绘图·clearActions (不推荐使用) 微信小程序API 其他 微信小程序API 下拉刷新

模块化

收藏375

阅读90450

更新时间2022-04-11

文件作用域

在JavaScript文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

通过全局函数getApp()可以获取全局的应用实例,如果需要全局的数据可以在App()中设置,如:

// app.jsApp({
  globalData: 1
 })
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

模块化

我们可以将一些公共的代码抽离成为一个单独的js文件,作为一个模块。模块只有通过module.exports才能对外暴露接口。

需要注意的是:

  • exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
  • 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。


// common.js
function sayHello(name) {
  console.log('Hello ' + name + '!')
}
module.exports = {
  sayHello: sayHello
}

在需要使用这些模块的文件中,使用require(path)将公共代码引入。

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
})

ES6 语法以及 API 支持

微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具

  • 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
  • 在 Android 上,小程序的 javascript 代码是通过 X5 内核来解析
  • 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中

虽然尽管三端的环境是十分相似的,但是至少在目前还是有一些区别的,这给很多开发者带来很大的困扰。

在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者代码 ES6 语法转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。

需要注意的是:

  • 这种转换只会帮助开发处理语法上问题,新的 ES6 的 API 例如 Promise 等需要开发者自行引入 Polyfill 或者别的类库。
  • 为了提高代码质量,在开启 ES6 转换功能的情况下,默认启用 javasctipt 严格模式,请参考 "use strict" 。

相关

视频

RELATED VIDEOS

更多

免费

极客学院jQueryMobile视频教程

免费

极客学院Swift语言视频教程

免费

尚学堂Swift入门视频教程

免费

微信小程序--企业微网站

免费

Flutter基础视频教程
中级 Flutter基础视频教程

28784次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号