ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

day01小程序快速入门

2022-07-28 09:33:57  阅读:227  来源: 互联网

标签:入门 微信 day01 程序 json API text 页面


这几天正式开始微信小程序的修炼了,就目前而言来看简直就是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

标签:入门,微信,day01,程序,json,API,text,页面
来源: https://www.cnblogs.com/heymar/p/16527357.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有