小程序的主要开发语言是 JavaScript
JS 作用:
①开发者使用 JS来开发业务逻辑;
②调用小程序的 API 来完成业务需求。
业务逻辑案例(响应用户操作)
<view>{{message}}</view>
<button bindTap="btn">点击</button>
点击 button 按钮的时候,希望界面显示 “我是点击后的内容”,于是在 button 上声明一个属性: bindtap ,在 JS 里声明 clickMe 方法来响应点击操作:
page({
btn:function(){
this.setData({message:"我是点击后的内容"})
}
})
调用API案例
除了业务逻辑外,开发者还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、地理定位、本地存储、微信支付、扫一扫、界面交互等。
在初始化的项目里,在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。
调用界面交互API案例:
wx.showToast(Object object)显示消息提示框
<button bindtap="submitBtn">提交</button>
submitBtn(){
wx.showToast({
title: '交易成功',
icon:'success',
duration:1500
})
},
扫一扫API案例:
wx.scanCode(Object object)调起客户端扫码界面进行扫码。
例如餐厅点餐的小程序,我们给餐厅中每个餐桌编号1-100号,把这个数字编码到二维码中,扫码获得编号之后,就可以知道是哪一桌点的菜,大大提高点餐体验和效率。
在线二维码:草料二维码https://cli.im
<button bindtap="sys">扫一扫</button>
sys(){
wx.scanCode({
success(option){
console.log(option)
const titleInfo=option.result;
wx.showToast({
title: titleInfo,
icon:'success'
})
},fail(option){
console.log(option)
}
})
},
扫一扫API案例–开启手机调试
真机测试小程序时,也可以开启手机调试模板
点击右上角按钮,弹框中选择打开调试,之后会自动关闭,重启即可
ECMAScript(简称ES)是一个语言标准,javascript则是基于这个标准实现的脚本语言。
小程序执行环境
小程序目前可以运行在三大平台:
①iOS平台,包括iOS9、iOS10、iOS11
②Android平台
③小程序IDE
兼容问题:
目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准,但是在小程序中, iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准,一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的,例如:箭头函数、let const、模板字符串等…
方案:
一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了解决这类问题,小程序IDE提供语法转码工具,将 ECMAScript 6代码转为 ECMAScript 5代码,从而在所有的环境都能得到很好的执行。
开发者需要在项目设置中,勾选 ES6 转 ES5 开启此功能
模块化
小程序中可以将任何一个JavaScript 文件作为一个模块,通过module.exports 或者 exports 对外暴露接口。
模块示例:
1.根目录下新建data→sort.js文件
2.编写模块,进行导出暴露
3.template.js文件利用require导入模块
4.使用模块暴露导出的排序方法进行排序
<view>{{arrayList}}</view>
data: {
arrayList:[1,6,3,9,33,66,18,19],
},
onLoad: function (options) {
this.setData({
arrayList:sortModule(this.data.arrayList)
})
},
作用域
案例:
①在脚本 a.js 中定义局部变量
②在脚本 b.js 中无法访问 a.js 定义的变量
全局变量设置:
当需要使用全局变量的时,通过使用全局函数 getApp() 获取全局的实例,并设置相关属性值,来达到设置全局变量的目的
案例:①在脚本 a.js 中设置全局变量
②在脚本 b.js 中访问 a.js 定义的全局变量
app.js定义全局变量
定义全局变量num(userInfo为用户数据)