首页 > 小程序 > 小程序开发

微信小程序开发js代码教程

小程序开发 2022-10-12 12:24:17  

之前和大家介绍了什么是微信小程序开发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教程,大家跃跃欲试有木有,赶紧打开开发者微信小程序开发工具试试吧。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://chcsas.com/xcx/1733.html

加载中~

木星教程网

统计代码 | 湘ICP备19012813号-5

本网站LOGO受版权及商标保护,版权登记号:国作登字-2022-F-10126915,未经湖南木星科技官方许可,严禁使用。
Copyright © 2012-2022 湖南木星科技有限公司(木星网)版权所有
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:aishangyiwan@126.com

扫描微信二维码

关注我们可获取更多热点资讯