微信小程序(js逻辑文件)

小程序的主要开发语言是 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为用户数据)
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值