小程序开发01

一行代码三个错。

已于 2022-09-15 13:41:01 修改

阅读量176

点赞数

分类专栏：笔记文章标签：微信小程序小程序微信

于 2022-09-03 22:40:09 首次发布

本文链接：https://blog.csdn.net/weixin_51373934/article/details/125474757

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小程序基础

1.小程序代码构成

创建好一个小程序项目之后，以一个文件夹的形式存在，以下为小程序项目的基本组成结构：

pages用来存放所有小程序的页面，由4个基本文件组成
小程序页面组成部分为：
（1）.js文件，页面的脚本文件，存放页面的数据，事件处理函数等
（2）.json文件，当前页面的配置文件，配置窗口的外观，表现等
（3）.wxml文件，页面的模板结构文件
（4）.wss文件，当前页面的样式表文件
utils用来存放工具性质的模块
app.js小程序项目的入口文件
app.json小程序项目的全局配置文件
app.wss小程序项目的全局样式文件
project.config.json项目的配置文件
sitemap.json用来配置小程序及其页面是否允许被微信索引

在这里插入图片描述

json配置文件的作用
json作为一种数据格式，总是以配置文件的形式存在，在小程序中用来对小程序项目进行不同级别的配置，有以下四种：
（1）项目根目录中的app.json配置文件
app.json是当前小程序的全局配置文件，包括了小程序的所有页面路径，窗口外观，界面表现，底部tap等，图中四个配置项作用为：
pages：记录当前小程序所有页面的路径，同时也可以直接再次新建页面，但有时候会出错，此时可以选择直接在左侧资源管理器中对应的目录下鼠标右键，新建page，可创建新页面，配置文件也会自动添加对应页面路径。

window：全局定义小程序所有页面的背景色，文字颜色等
style：定义小程序所使用的样式版本
sitemapLocation:用来指明sitemap.json的位置[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDGBirYr-1663220414136)(https://img-blog.csdnimg.cn142e6b265faecc33e8e25.png)]
（2）项目根目录中的project.config.json配置文件
project.config.json是项目配置文件，在这个文件中可以对小程序开发工具进行个性化配置，例如：

setting中保存编译相关配置
projectname保存项目名称
appid保存小程序账号

在这里插入图片描述

（3）项目根目录中的sitemap.json配置文件
用来配置小程序页面是否可以被微信搜索
（4）每个页面文件夹中的.json配置文件
小程序单个页面的配置，会覆盖掉app.json的window中相同的样式

以上为一个基本的小程序文件结构的大概介绍，详情可见微信官方开放文档https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

2.小程序宿主环境

宿主环境是指程序运行时所必须依赖的环境。手机微信是小程序的宿主环境，小程序可以借助宿主环境完成微信扫码，微信支付，微信登录，地理定位等。

小程序宿主环境包含的内容

通信模型
小程序通信的主体是渲染层和逻辑层，wxml和wxss工作在渲染层，js工作在逻辑层。通信模型分为两部分：渲染层与逻辑层，逻辑层与第三方服务器，均由微信客户端进行转发。
运行机制
小程序页面的渲染过程：
a.加载解析页面的.json配置文件；
b.加载页面的.wxml模板和.wxss样式
c.执行页面的.js文件，调用Page（）创建页面实例
d.页面渲染完成
组件
小程序中的组件由宿主环境提供，主要有以下九类：
（1）视图容器
（2）基础内容
（3）表单组件
（4）导航组件
（5）媒体组件
（6）map地图组件
（7）canvas画布组件
（8）开放能力
（9）无障碍访问
常用的如view ,text,button等，具体使用细节可参考开发文档
API
小程序可以调用微信提供的API，方便的使用微信提供的能力，如获取用户信息，本地存储等。
小程序官方将API分为三大类：
（1）事件监听API，以on开头，用以监听某些事件触发。如wx.onWindowResize(function callback)监听窗口尺寸变化事件。
（2）同步API，以Sync结尾的，可以通过函数的返回值直接获取，如果执行出错，会抛出异常。如wx.setStorageSync(‘key’,‘value’)向本地存储写入内容
（3）异步API。类似于jQuery中的$.ajax(options)函数，通过success,fail,complete接收调用结果。如wx.request()发起网络数据请求，通过success回调函数接收数据。