入门级小程序开发

小程序开发


浏览:1331 次

建议使用新的电子邮件注册帐户,并且没有注册任何其他小程序或官方帐户。访问注册页面并耐心完成注册。

获取APPID

由于微信小程序界面等功能调用较晚,需要在开发者的小程序中获取APPID。注册成功后,您可以登录并获取APPID。

登录后,您可以看到以下界面

然后复制你的APPID,并保持安静。不要给别人看

开发工具

微信小程序有自己的开发工具,在一个完整的环境中集成了开发预览、调试和发布。

不过,由于编码体验不佳,建议使用vs code+微信小程序编辑工具来实现编码

Vs代码负责键入代码,微信编辑工具负责预览

第一个微信小程序

打开微信开发者工具

新建小程序项目

填写项目信息

微信开发者工具简介

有关详细用法,您可以查看官方网站

有关详细用法,您可以查看官方网站

小程序结构目录

小程序框架的目标是让开发人员在微信中开发具有本地APP体验的服务变得尽可能简单和高效。

小程序框架提供了自己的视图层描述语言WXML和WXSS以及JavaScript,并在视图层和逻辑层之间提供了数据传输和事件系统,以便开发人员能够专注于数据和逻辑。

小程序文件结构

基本项目目录

小程序配置文件

小程序app将包含最基本的两个配置文件。一个是全球app。json和页面。页面本身的json

注意:配置文件中不能出现注释

全局配置app.json

app。json是当前applet的全局配置,包括applet的所有页面路径、接口表示、网络超时和底部选项卡。app。通用快速启动项目中的json配置

字段的含义

页面字段-用于描述当前小程序的所有页面路径。这是为了让微信客户端知道您的小程序页面当前在哪个目录中定义。

窗口字段——定义小程序所有页面的顶部背景色、文本颜色定义等。

请参考app。json配置以获取完整的配置信息

选项卡页面底部导航

页面配置Page.json

页面。这里的json实际上用于表示与applet页面(如page)相关的配置。json。

开发人员可以独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等。

页面配置只能设置app.json中某些窗口配置项的内容。页面中的配置项将覆盖应用中的相同配置项。json的窗口。

模板语法

WXML(微信标记语言)是由框架设计的一组标记语言。结合基本组件和事件系统,可以构建页面结构。

数据绑定

普通写作

组件属性

布尔型

不直接写checked=“false”,计算结果为字符串

<;/复选框>

三元运算

算术运算

逻辑判断

<;/视图>

字符串操作

列表呈现

wx:用于

项的变量名默认为项wx:for项可以指定数组当前元素的变量名

下标变量名默认为index wx:for index可以指定数组当前下标的变量名

Wx:key用于提高数组渲染的性能

渲染包含多个节点的块最终不会成为真正的dom元素

条件渲染

wx:如果

在框架中,使用wx:if=“{{condition}}”确定是否需要呈现代码块:

True

隐藏的

类似于wx:if

隐藏以便频繁切换

不经常使用Wx:if

小程序事件的绑定

通过Bind关键字绑定小程序中的事件。例如,bindtap bindinput bindchange

特别注意

事件不能与参数绑定,以下内容不正确

通过标记定制传播事件的方式和价值

触发事件时获取数据

WXSS样式

与CSS相比,WXSS扩展功能:

响应长度单位

Rpx样式导入

尺寸单位

Rpx(反应像素):根据屏幕宽度自适应。指定的屏幕宽度为750rpx。例如,在iPhone 6上,如果屏幕宽度为375px,并且有750个物理像素