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

posted @ 2022-07-28 09:29  Heymar-10  阅读(152)  评论(0)  编辑  收藏  举报