了解更多企业以及行业的动态

立即咨询
您现在所在的位置是: 首页> 资讯> 行业动态
开发小程序: 微信小程序开发教程1.获取获取项目的AppID登录 |昱远信息系统开发
发布:2022-05-05 浏览:37

微信小程序开发用户工具0.9.092300正式版

立即下载

如何开发微信小程序,微信小程序开发教程。微信小程序今天公测。这是一种提升用户体验的全新应用模式。很多小伙伴也想在微信小程序里开发,不过这还是个新应用。不知道怎么用,怎么开发微信小程序,今天小编西西给大家带来一个微信小程序开发教程。

微信小程序开发教程

1.获取微信小程序的AppID

登录后,可以在网站的“设置”-“开发者设置”中查看微信小程序的AppID。请注意,不能直接使用服务帐号或订阅帐号的 AppID。

设计小程序开发_微信小程序游戏开发_开发小程序

注意:如果你想用非管理员的微信账号在手机上体验小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块中,绑定需要体验小程序的微信账号。本教程默认使用管理员的微信账号进行账号注册和体验。

2.创建一个项目

我们需要使用开发者工具来完成小程序的创建和代码编辑。

开发者工具安装好后打开,用微信扫码登录。选择创建“项目”设计小程序开发,填写上面获取的AppID,设置本地项目名称(不是小程序名) ,如“我的第一个项目”,选择本地文件夹作为代码存放目录,点击“新建项目”。

为了方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹为空文件夹,开发者工具会提示是否需要创建快速启动项目。选择“是”,开发者工具会帮我们在开发目录下生成一个简单的demo。

项目创建成功后,我们可以点击项目进入,看到完整的开发者工具界面,点击左侧导航,我们可以在“编辑”中查看和编辑我们的代码,在“调试”中进行测试代码并在微信客户端模拟小程序的效果。在“工程”中,可以发送到手机上预览实际效果。

3.写代码

设计小程序开发_微信小程序游戏开发_开发小程序

创建一个小程序实例

点击开发者工具左侧导航中的“编辑”,我们可以看到这个项目已经初始化完毕,包含一些简单的代码文件。最关键和必不可少的是 app.js、app.json 和 app.wxss。其中.js后缀为脚本文件,.json后缀为配置文件,.wxss后缀为样式表文件。微信小程序会读取这些文件并生成小程序实例。

我们先简单了解一下这三个文件的作用,方便修改,从零开始开发自己的微信小程序。

app.js 是小程序的脚本代码。我们可以监控和处理小程序的生命周期函数,并在这个文件中声明全局变量。调用框架提供的丰富API,例如本例中的本地数据的同步存储和同步读取。更多可用API请参考API文档

app.json 是整个小程序的全局配置。在这个文件中,我们可以配置小程序由哪些页面组成,配置小程序的窗口背景颜色,配置导航栏的样式,配置默认标题。请注意,不能向此文件添加评论。更多可配置项,请参考配置详情

app.wxss 是整个小程序的通用样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

微信小程序游戏开发_设计小程序开发_开发小程序

创建页面

在本教程中,我们有两个页面,索引页面和日志页面,即欢迎页面和小程序启动日志的显示页面,它们都在pages目录下。微信小程序中每个页面的【路径+页面名】需要写在app.json的pages中支付宝小程序开发,pages的第一页就是小程序的首页。

每个小程序页面由四个不同后缀的同名同路径文件组成,如:index.js、index.wxml、index.wxss、index.json。 .js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的文件是样式表文件,.wxml后缀的文件后缀为页面结构文件。

index.wxml是页面的结构文件:

在本例中,, , 用于构建页面结构、绑定数据和交互处理功能。

index.js 是页面的脚本文件。在这个文件中,我们可以监控和处理页面的生命周期功能,获取小程序实例,声明和处理数据,响应页面交互事件。

微信小程序游戏开发_开发小程序_设计小程序开发

index.wxss 是页面的样式表:

页面的样式表不是必需的。当存在页面样式表时,页面样式表中的样式规则将层叠在 app.wxss 中的样式规则之上。如果不指定页面的样式表,也可以直接在页面的结构文件中使用app.wxss中指定的样式规则。

index.json 是页面的配置文件:

页面的配置文件不是必需的。当页面有配置文件时设计小程序开发,页面中的配置项会覆盖app.json窗口中相同的配置项。如果没有指定页面配置文件,页面直接使用app.json中的默认配置。

日志的页面结构

微信小程序游戏开发_设计小程序开发_开发小程序

日志页面使用control标签组织代码设计小程序开发,对日志数据使用wx:for,循环日志数据展开节点

结果如下:

4.手机预览

在开发者工具左侧菜单栏中选择“项目”,点击“预览”,在微信客户端扫码体验。

【昱远信息系统开发定制】

本站声明: 本文章内容来源于互联网,文章内容仅供用户参考。本公司不能完全保证文章内容的准备性、时效性。如果因本文章对用户造成了任何损失或者损害,本公司将不会承担任何法律责任。如果涉及到版权问题,请提交到wikins@nbyuyuan.com

  • 立即与昱远顾问通话
    电话咨询
  • 在线咨询
  • 扫一扫添加微信
    微信咨询
  • 与昱远顾问QQ咨询
    QQ咨询