day01小程序快速入门


这几天正式开始微信小程序的修炼了,就目前而言来看简直就是vue和react的结合体,所以在学小程序前,先把框架熟悉还是挺有用的。

一.简介

1.1与普通网页区别

image-20220725103607923

二.第一个小程序

需要注册小程序开发账号,最主要是获得AppId

然后就需要安装 微信开发者工具

2.1设置外观和代理

image-20220725105931540

2.2模拟器查看效果

image-20220725111115908

2.3真机查看效果

image-20220725111201748

三.小程序代码构成

3.1项目基本组成结构

image-20220725112704774

3.2页面组成部分

image-20220725112937888

3.2.1 json文件的作用

image-20220725113144897

  • app.json

image-20220725113546810

  • projec.config.json

    image-20220725113853757

  • sitemap.json我的理解为用户在微信内部搜索的时候这个就发挥作用了,用户可以直接通过微信搜索搜到你这个小程序

    image-20220725114251555

    现在就是表示所有小程序页面都可以被搜索到

    如果不允许被索引到

    image-20220725114434132

  • 页面json

    image-20220725115047459

    会覆盖掉全局下的配置

3.3 新建小程序页面

直接通过修改app.json创建一个页面即可自动创建

image-20220725115428566

3.4 修改项目首页

修改app.json里面的顺序为第一位即可

image-20220725115652293

3.5 WXML模板

和html的区别

image-20220725115934047

3.6 WXSS

和css区别

image-20220725120244161

注意最好别用太生僻的选择器,wxss不会认,第二个是元素选择器

3.7 js

分为三类

image-20220725133535786

四.小程序宿主环境

宿主环境即程序运行所依赖的环境,比如安卓系统只能安装安卓软件,ios系统只能安装苹果软件

手机微信是小程序宿主环境

image-20220725133810281

4.1 通信模型

通信主体分为渲染层(wxml、wxss)和逻辑层(js脚本)

通信模型分为两部分,渲染层和逻辑层的通信,逻辑层和第三方服务器的通信,都是由微信客户端完成转发

image-20220725134246156

4.2 运行机制

小程序执行过程

image-20220725134504034

页面渲染过程

image-20220725134552795

4.3 组件

一共分为九大类

image-20220725134707359

  • 视图容器

    view(div)、scroll-view(可滚动视图区域)、swiper和swiper-item(轮播图组件和里面的每一项)

    view基本使用

    image-20220725135320681

    scroll-view基本使用

    image-20220725140136579

    注意要加横向或者纵向滚动的属性

    swiper基本使用

    image-20220725140852957

    swiper常用属性

    image-20220725155553661

  • 基础内容

    text(span)、rich-text

    text:selectable属性表示支持长按选中文本操作(注意小程序只有text有这个属性

    image-20220725160613789

    rich-text:将html字符串渲染为对应ui结构通过nodes属性节点

    注意:外面是双引号里面要用单引号

    image-20220725161150774

  • 其他常用组件

    button

    比htmlbutton功能要更丰富

    image-20220725161409461

    image-20220725161612338

    image

    图片组件宽高默认300px 240px

    image-20220725162016642

image:mode属性

可以指定图片裁剪缩放模式

image-20220725162216241

4.4 API

一共分为三大类

  • 事件监听API wx就是小程序的顶级对象,类似于window

image-20220725163048995

  • 同步API

    image-20220725163158117

  • 异步API

    image-20220725163235812

五.协同工作与发布

5.1 权限管理

首先如果是在中大型公司里面,开发一个小程序是需要同时多个人一起来协同开发的,包括开发和测试都是有不同的权限的

image-20220725164407405

开发流程:

image-20220725164540211

5.2 成员管理

主要就是项目成员和体验成员,最大的就是管理员

image-20220725165129820

项目成员和体验成员的添加删除在小程序管理后台修改

image-20220725172104939

image-20220725172109451

5.3 发布

小程序版本

image-20220725172331726

上传版本

image-20220725172415906

上传之后就可以在后台看见上传的版本

image-20220725172442743

审核通过就可以发布了

image-20220725172603631

小程序的推广与运行数据的查看

image-20220725173023271

查看数据

一种是通过管理后台

image-20220725173155948

一种是通过小程序数据助手

image-20220725173236611

原创文章,作者:1402239773,如若转载,请注明出处:https://blog.ytso.com/277537.html

(0)
上一篇 2022年7月28日 14:13
下一篇 2022年7月28日

相关推荐

发表回复

登录后才能评论