00小程序开发基础

开始

AppID：小程序的AppID相当于小程序平台的ID卡。

查看AppID：登录后，您可以在“设置-开发设置”中查看AppID

代码组成

微信小程序结构.png

1.JSON配置文件

app。json：小程序的全局配置（所有页面路径、界面表示、网络超时、底部选项卡等）

项目配置。json：工具配置（界面颜色、编译配置等）

页Json：页面配置（主要包括界面配置的顶部颜色、是否允许下拉等），可以提供与主页不同的效果，例如日志。页面/日志下的json配置文件

2.WXML模板文件

传统的网页开发采用HTML+CSS+JS的方式，而WXML在小程序中的作用与HTML类似。

但WXML与HTML相同：

不同的标签名称：小程序的常见标签包括视图、按钮、文本等，并封装地图、视频、音频等实用组件

它包含更多的属性，如wx:if和表达式，如｛｛｝｝：指的是将呈现与逻辑分离的思想（JS只管理状态，而不是直接操作DOM），其中｛｛}｝将变量绑定到接口。wx：在开始时具有一定的控制角色，辅助数据绑定描述了状态和接口之间的关系

3.WXSS样式文件

与CSS相似但不同：

添加维度单位：WXSS底层支持维度单位rpx，消除了转换的麻烦

提供全球风格和本地风格：类似于app。json和page.json

仅支持部分选择器

4.JS脚本文件

｛｛msg｝｝

单击我</按钮>

在按钮上添加属性bindtap以响应JS文件中的此点击

第页({

单击我：函数（）{

这setData（｛msg:“Hello World”｝）

}

})

此外，JS文件可以调用wx提供的各种API

文件结构

小程序包括描述整个程序的app和描述每个页面的多个页面

小程序主体包含三个文件，它们位于项目根目录中

文件

必须

效应

app.js

对

小程序逻辑

app.json

对

小程序公共设置

app.wxss

不

全局样式

一个页面由四个文件组成。四个文件的路径和文件名应一致

文件

必须

效应

js语言

对

页面逻辑

wxml语言

对

页面结构

wxs软件

不

页面样式

json公司

不

页面配置

小程序功能

启动

在小程序启动之前，它将下载所有代码包，然后在App.json中呈现第一页。程序启动后，app中app实例的onLaunch。js将执行

app({

onLaunch:函数（）{

//小程序启动后触发

}

})

页面呈现

微信客户端首先[1]根据日志Json生成一个界面（包括顶部颜色文本等），然后[2]根据WXML和WXSS加载页面结构和样式，最后加载JS文件

第页({

数据：｛//页面呈现中涉及的数据

日志：[]

},

onLoad:函数（）{

//页面呈现后执行

}

})

装配

提供丰富的基本组件，以便于开发人员组合和拼接到小程序中

美国石油学会

为调用提供丰富的API

获取地理位置

wx.获取位置({

类型：“wgs84”，

成功：（res）=>{

Var纬度=res.latitude/经度

var经度=res.longitude/纬度

}

})

呼叫扫描

wx.scan代码({

成功：（res）=>{

控制台.log（res）

}

})

出版前的准备&；联机

小程序版本

版本

解释

开发版本

使用开发人员工具，您可以将代码上载到开发版本。开发版本只保留每个人的最新上传代码。单击提交以供审阅以提交代码以供审阅。可以删除开发版本，而不影响在线版本和正在审查的版本的代码。

正在审查的版本

只能查看一个代码。批准结果可用后，可以在线发布或直接重新提交以供批准，覆盖原始批准版本。

联机版本

所有在线用户使用的代码版本。新版本代码发布后，此版本的代码将被覆盖并更新。

发布过程

开发人员将代码上载到开发版本

提交要发布的程序以供审查

单击以发布批准的程序

预览

与上传的代码不同，开发工具可以预览小程序，以帮助开发人员在移动客户端上检查小程序的真实性能。