美文网首页
初识小程序

初识小程序

作者: 梵仇不是大侠 | 来源:发表于2024-10-27 15:48 被阅读0次

学习目标:


小程序的简介

1.小程序和普通网页开发的区别


创建第一个小程序

1.点击注册 使用浏览器 打开https://mp.weixin.qq.com/网站,点击右上角的 立即注册 即可进入小程序开发账号的注册流程

2.下载开发者工具

微信开发者工具是微信官方推荐使用的小程序开发工具,它提供的主要功能如下:

a.快速创建小程序项目

b.代码查看和编辑

c.对小程序功能进行调试

d.小程序的预览和发布

3.扫码登录开发者工具

4.设置开发者工具的外观和代理

5.点击新建项目


小程序的项目结构

小程序的基本组成结构

小程序页面的组成部分

小程序官方建议把所有小程序的页面,都放在pages目录中,以单独的文件存在,如图:

index 就是一个页,logs就是另一个页,每个页都有4个基本文件组成

Json配置文件的作用

JSON是一种数据格式,再实际开发中,JSON总是以配置文件的形式出现。小程序也不例外:通过不同的 .json配置文件,可以对小程序项目进行不同级别的配置。

小程序项目中有4中json配置文件,分别是:

1).项目根目录中的 app.json 配置文件

2).项目根目录中的 project.config.json 配置文件

3).项目根目录中的 sitemap.json 配置文件

4).每个页面文件夹中的  .json 配置文件

app.json文件

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、底部tab、等。

Demo项目里边的app.json 配置内容如下:

app.json文件配置详情

project.config.json文件

project.config.json 是项目配置文件,用来记录我们对小程序开发工具所作出的个性化配置,例如:

setting中保存了编译相关的配置

projectname 中保存的是项目名称

appid中保存的是小程序的账号ID

sitemap.json文件

微信已开放小程序内搜索,效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建议索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

大白话就是你在这里面写规则,匹配到你配置好的条件,就展示你的小程序。 举个栗子

页面的.json配置文件

小程序中的每一个页面,可以用.json文件来对页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项。例如:

新建小程序页面

只需要在 app.josn   >  pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件 如图所示:

我们只需要在pages新建一个list 路径  ctrl+s保存 左侧就自动生成了一个list文件夹

修改项目首页

只需要调整 app.json > pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把牌在第一位的页面,当做项目首页进行渲染,如图:

原先默认是index放在第一位置,现在把list放到第一位置以后 保存,自动渲染了list为首页展示

什么是WXML?

WXML(WeiXin Markup Language)是小程序框架设计的一套 标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。

WXML和HTML之间的区别?

什么是WXSS?

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。

WXSS和CSS的区别?

小程序中的.js文件

一个项目仅仅提供页面的展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。例如:响应用户的点击,获取用户的位置等等。

小程序中.js文件的分类


小程序的宿主环境

什么是宿主环境?

小程序的宿主环境

小程序基于微信,手机微信就是小程序的宿主程序

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

1.通信模型

2.运行机制

3.组件

4.API

小程序的宿主环境-通信模型

1.通信的主体

2.小程序的通信模型

3.小程序的运行机制

小程序的启动过程:

小程序的页面渲染的过程:

4.小程序的组件

小程序中的组件也是有宿主环境提供的,开发者可以给予组件快速搭建出漂亮的页面结构。官方把小程序的组件分了九大类,分别是:

视图容器 ,基础内容,表单组件,导航组件, 媒体组件,map地图组件,canvas画布组件,开放能力,无障碍访问

其中前四个是比较常见的组件

视图容器组件有:

view 组件的基本使用示例:

scroll-view组件的基本使用:

这里值得注意的是使用该组件要给一个固定高度或宽度,并设置 属性 scroll-y 或scroll-x

swiper和swiper-item组件的基本使用:

这里需要注意的点是 父容器swiper 如果需要显示指示点 需要添加 indicator-dots 属性

轮播图组件swiper 常用的一些属性:

按自己的需求设置属性

常见的基础内容组件:

text组件的基本使用:

rich-text组件的基本使用:

rich-text组件通过 nodes属性渲染html

其他常用组件:

button按钮的基本使用:

通过 type属性指定按钮类型 size属性设置按钮大小 plain属性 按钮的镂空

值得注意的是,这些组件的默认样式是宿主环境提供的,之前的app.json篇讲述了,在app.json中可配置全局样式,其中一个配置项 "style":"v2"配置项,是当前全部组件样式的版本,版本的不同,会影响到全局组件的样式。

image组件的基本使用:

image组建中的mode属性:

5.小程序API的概述

小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。

小程序API三大分类:


协议同工作和发布

小程序的权限管理

1.小程序成员管理(可扫码登录微信公众号后台来查看这些权限配置):

2.不同项目成员对应的权限:

3.开发者的权限说明:

4.添加项目成员和体验成员:

小程序的版本

1.软件开发过程中的不同版本

2.小程序的版本

3.小程序的发布上线

一个小程序的发布上线,一般经过 上传代码-提交审核-发布 这三个步骤。

4.小程序上传代码

5.在后台查看上传之后的小程序版本

6.小程序提交审核

7.小程序的发布


总结

相关文章

  • 初识小程序

    从开始接触小程序到现在审核通过一个半月的时间,第一次接触感觉跟vue有很多相似的地方。 总结一下小程序的基本用法:...

  • 初识小程序

    什么是小程序 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的 梦想,用户扫一扫或者搜一下即可...

  • 初识小程序

    本质上来说,我们更希望在智能手机里用户可以更快捷的获取服务,但是他的体验又比网站要好很多很多,同时他的麻烦程度又比...

  • 初识小程序

    不确定原则一: 微信小程序的使用体验接近原生APP,与H5应用相比更加流畅。微信小程序的开发难度接近于H5应用开发...

  • 初识小程序

    关注了挺久的小程序,今天终于如期而至。IOS需要更新到最新版本才可体验。安卓系统可支持添加小程序到桌面。这里附上小...

  • 初识小程序

    微信小程序入门 什么是微信小程序:不需要下载直接使用的一种程序 不需要下载-安装包大小小于1M 用户用完即走,不用...

  • 初识小程序

    学习小程序的第一周,做一个简单的整理,谈谈自己对小程序的体会。 一个完整的小程序项目是一个集成于微信内部的几个网页...

  • 初识小程序

    一、前言 小程序目前已经遍布我们的生活 我们每天几乎都或多或少的会用到小程序,最常见的便是乘车二维码了 因此学习下...

  • 初识小程序 - 配置

    全局配置~app.json 1.pages配置项 pages配置项接受一个数组,用来指定小程序由哪些页面组成,是必...

  • 初识小程序-组件

    视图容器(View Container): 基础内容(Basic Content): 表单(Form): 导航(N...

网友评论

      本文标题:初识小程序

      本文链接:https://www.haomeiwen.com/subject/snfudjtx.html