day01小程序快速入门

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

一.简介

1.1与普通网页区别

二.第一个小程序

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

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

2.1设置外观和代理

2.2模拟器查看效果

2.3真机查看效果

三.小程序代码构成

3.1项目基本组成结构

3.2页面组成部分

3.2.1 json文件的作用

• app.json

• projec.config.json

  

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

  

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

  如果不允许被索引到

  

• 页面json

  

  会覆盖掉全局下的配置

3.3 新建小程序页面

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

3.4 修改项目首页

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

3.5 WXML模板

和html的区别

3.6 WXSS

和css区别

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

3.7 js

分为三类

四.小程序宿主环境

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

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

4.1 通信模型

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

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

4.2 运行机制

小程序执行过程

页面渲染过程

4.3 组件

一共分为九大类

• 视图容器

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

  view基本使用

  

  scroll-view基本使用

  

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

  swiper基本使用

  

  swiper常用属性：

  

• 基础内容

  text（span）、rich-text

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

  

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

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

  

• 其他常用组件

  button

  比htmlbutton功能要更丰富

  

  

  image

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

  

image：mode属性

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

4.4 API

一共分为三大类

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

• 同步API

  

• 异步API

  

五.协同工作与发布

5.1 权限管理

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

开发流程：

5.2 成员管理

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

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

5.3 发布

小程序版本

上传版本

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

审核通过就可以发布了

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

查看数据

一种是通过管理后台

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