微信小程序入门

最新推荐文章于 2024-08-30 16:02:47 发布

申多事儿

最新推荐文章于 2024-08-30 16:02:47 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/weixin_46031116/article/details/115471546

版权

本文介绍了微信小程序的定义、与H5的区别，详细讲解了注册、开发流程，并剖析了项目基本文件类型，包括JSON配置、WXML结构和WXSS样式。重点突出了关键技术和标签：JSON配置、WXML和WXSS语法，以及小程序开发账号管理。

摘要由CSDN通过智能技术生成

微信小程序

一、微信小程序是什么

微信小程序是一种不需要下载安装即可使用的应用
微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

二、微信小程序和普通H5的区别

微信小程序没有DOM,BOM的API，只能使用EcmaScript核心部分（数组，字符串方法，for,if…）
微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞

三、微信小程序的帐号注册及开发流程

1.微信小程序的注册

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
按照连接地址给出的提示进行注册

2.微信小程序登录：

https://mp.weixin.qq.com/
登录后：找到开发-开发管理-开发设置-开发者ID
AppID(小程序ID)	如:wxb61621e772a9f027

四、小程序项目的基本文件类型

第一块：JSON
上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？

JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。
比如navigationBarTitleText 就是显示在小程序最上方的标题名称。
页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "标题zwz",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

第二块：WXML
WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
比如最常用的双向数据绑定：index.wxml

<view class="container">
  {{msg}}
</view>
index.js

Page({
  data: {
    msg:'hello zwz',
  },
  onLoad: function () {
   
  }

第三块：WXSS
WXSS和CSS一样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中，拥有绝大部分CSS的内容。
那么相比CSS而言，WXSS中独有的rpx单位可能会用得到，这个尺度单位可以根据屏幕宽度进行自适应。
具体格式如下所示，下面是用了类选择器对WXML中的元素进行样式美化。

.title{
  font-size: 30px;
  color: royalblue;
}
.input-placeholder{
  font-size: 16px;
}
.section{
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  padding-top: 15px;
  font-size: 16px;
  display: flex;
}