之前和大家介绍了什么是微信小程序开发js代码,今天就和大家介绍一下微信小程序开发js代码教程

步骤一:打开微信小程序开发js编辑页面

打开index.js编辑页面,我们先把这页面的所有内容都清空,然后输入Page,开发者工具会弹出提示,这时按tab键即可生成默认代码。

微信小程序开发js编辑页面

①.Page({}) 包括页面的所有操作代码。

②.Page中,data里面包含了wxml页面所需要的所有初始数据。

③.Page中其它 on 开头的都是小程序自带的函数,用来响应用户的响应动作,这些大家可以简单看一下都能执行什么操作,然后就都可以删掉了(暂时)。

data

步骤二:绑定数据

①.首先在data中添加一段内容:

index.wxml

②.然后更改咱们上节课index.wxml中的代码:

index.wxml

③.这回咱们保存(ctrl+s),可以看到如下内容

微信小程序开发js代码教程(图5)

{{content}},两个大括号包围的内容是数据绑定的方式,好处是在js文件内可以处理动作,根据动作对文字进行改变,那么如何做这些动作呢?

接下来咱们在index.wxml 和 index.js文件里分别作如下改动:

index.js文件

bindtap:是对wxml中元素进行动作绑定,也就是当你点击此元素时,会调用js文件中的相应函数进行执行,在本例中,就是点击view元素(红色块)时会调用click函数,index.js中的click函数被执行。

click: function(): 这段代码是函数的格式,无需纠结,只需要记住这个格式即可。

this.setData({  }):这部分是本文关键,是小程序后端数据更改的关键部分,用来对data中初始值进行改变,改变的模式是 content: “xxx”

(至于this是什么意思,咱们后续课程会详细讲解),同以往学习的语言不同,这个是以冒号为分隔,左侧是变量(只能是data中的变量),右侧是要改变的值,其实就是C语言中的赋值操作,C语言中咱们这么写,content=”xxx”,在这里把 等号(=) 换成冒号(:) 。

编写完保存,这时候咱们点击红色块,得到新内容:

点击红色块

以上就是微信小程序开发js教程,大家跃跃欲试有木有,赶紧打开开发者微信小程序开发工具试试吧。