微信小程序

1. 介绍

微信公众平台由腾讯提供，基于腾讯微信的服务器，为广大企业、组织、个人提供用户管理或咨询服务的平台。微信公众平台提供了3种账号类型：

服务号、订阅号、小程序

服务号：
-类似：中国移动。为企业或组织提供的的进行用户管理和服务的账号，侧重于服务。
订阅号：类似：CSDN。为企业或组织或个人提供的进行资讯分享的账号，侧重于资讯分享。
小程序：为企业、组织、个人提供的可以达到原生APP相同功能的应用。（微信内部运行）。其优点在于免下载，用完就走。

2. 小程序接入流程

微信公众平台首页

创建第一个小程序项目

AppID(小程序ID): 开发 ==> 开发管理

安装微信开发者工具IDE
管理员微信扫码登录

3. 文件结构

3.1 小程序项目的文件和文件夹

使用小程序开发工具新建的项目根目录包含以下文件夹以文件

pages（文件夹）：
① 页面index。（页面文件夹下：index.js（js）
② index.json(配置)
③ index.wxml （html）
④ index.wxss（css））
utils（文件夹）
app.js
app.wxss
project.config.json
sitemap.json

3.2 小程序包中包含的文件类型

1. `json`文件配置文件

app.json: 全局配置文件。全局生效
project.config.json 小程序项目的配置文件
pages.json 单页面配置文件 (每个页面都会有一个*.json)

2.`wxml`文件定义页面模板

类似于html 不能用任何html标签

3. `wxss`文件定义页面样式

app.wxss 用于定义全局样式。全局生效
page.wxss 定义单页面中的组件样式

4. `js` 文件定义页面脚本文件

app.js 定义小程序的入口脚本文件。该文件只会在启动小程序时执行一次。
page.js 定义小程序的单页面脚本文件。的

4. 配置项

配置项

page.json配置项

app.json参考文档

app.json用于对小程序进行全局配置，文件内配置需要使用json语法
注意

json文件中无法写注释

字符串必须在双引号之间。Json对象的属性名也必须在双引号号之间

数组或对象最后一个不能加逗号

json中不存在undefined数据类型

pages配置项

pages配置项用于指定当前小程序中包含哪些页面（定义路由界面）
pages下的第一个会默认为首页。

"pages":["pages/index/index","pages/logs/logs","pages/test/test"],

新建配置项”pages/test/test”将会在pages目录下新增test目录，然后在其中新建四个文件test.js test.json test.wxml test.wxss 四个文件

window配置项

window配置项参考网站

window配置项用于设置小程序导航栏、标题、窗口背景的内容与样式。object类型

"window":{"backgroundTextStyle":"light",       //背景文本样式
"backgroundColor": "#ccc",        //背景颜色
"enablePullDownRefresh": true,     //下拉刷新开启"navigationBarBackgroundColor": "#fff",    //导航背景色"navigationBarTitleText": "Weixin",        //导航文本内容"navigationBarTextStyle":"black"         //导航文本样式}

tabbar配置项

tabbar属性用于配置小程序的底部选项卡，object类型
页面对象内容在内存中不销毁

实现步骤

准备好底部选项卡所需要的3个页面在pages配置

配置tabbar配置项，指定底部选项卡的文本默认颜色，选中项文本颜色，还要指定每个选项卡中的文本内容、页面路径、图片路径、选中的图片路径等参数

"tabBar": {"color": "#333","selectedColor": "#f00","list": [{"pagePath": "pages/index/index","text":"影院","iconPath": "/images/index_disable.png","selectedIconPath": "/images/index_enable.png"},{"pagePath": "pages/theatre/theatre","text":"影院","iconPath": "/images/theatre_disable.png","selectedIconPath": "/images/theatre_enable.png"},{"pagePath": "pages/me/me","text":"影院","iconPath": "/images/me_disable.png","selectedIconPath": "/images/me_enable.png"}]},

注意事项

如果position设置为顶部选项卡，无法显示图标

List中至少包含2个选项卡，最多包含5个选项卡

Pagepath不能以/开头

iconPath与selectedIconPath不能用网络路径

图标尺寸建议81*81，每张图片不能超过40k

style配置项

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。
本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

sitemapLocation配置项

sitemapLocation属性用于指定sitemap.json配置文件的位置。

sitemap.json

参考官网

开发者可以通过sitemap.json配置，或者管理后台配置小程序及其页面是否允许被微信索引

"rules": [{"action": "disallow","page": "pages/me/me"},{"action": "allow","page": "*"}]

sitemap的索引提示默认是开启的，如果需要关闭它，可以修改小程序根目录下的project.config.json中的setting配置字段：”checkSiteMap”:false

5. 页面文档

app.wxss

用于定义组件的全局样式

app.js

app.js是小程序全局的初始化启动脚本。
当小程序第一次启动时，将会执行一次app.js里面的代码，对App对象进行初始化，注册应用相关的生命周期方法，声明并初始化全局数据等。
app.js在应用的生命周期过程中仅执行一次。

App(onLaunch(){    //生命周期方法，启动就会运行一次
}
);

wxss

wxss是小程序提供的一套样式语言，小程序打包编译时会对该文件的内容重新编译。它具备了css的大部分特性。并且对css进行了扩展，新增了rpx作为响应式尺寸单位。

6. rpx像素单位

使用rpx作为尺寸单位来定义组件的宽高,可以更具屏幕的分辨率对图片的宽、高进行自适应。rpx在不同的手机屏幕上将会装成不同的px值。依照的规则是:
无论任何屏幕，宽度永远都是750rpx。
屏幕宽750px ==> 1px=1rpx
屏幕宽375px==> 1px = 2rpx
若图片宽度设置为375px,则该图片无论在任何设备下宽度都会占用屏幕的一半。并且高度也可以使用rpx来进行定义。

微信小程序 -- (1)文档说明、配置项相关推荐

微信小程序_文档_01_入门
小程序API文档地址: https://developers.weixin.qq.com/miniprogram/dev/ 微信小程序小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序 ...
微信小程序_文档_04_框架_视图层_WXS_WXSS
WXS WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. 注意 wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行. wxs 与 jav ...
微信小程序常用文档地址（自用常更新）
微信开放文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 阿里云oss文档 https://he ...
微信小程序学习文档指南
一.开发前准备 1.开发工具下载. 2.微信小程序设计指南 3.首先要通读一遍官方文档,看看都有哪些东西,都能干什么. 二.目录结构 1.components 小程序自定组件 (组件生命周期,组件间通 ...
第5节：开发微信小程序之文档详解
前言前面4节,我们讲解了为什么要开这一个专栏,以及第一个小程序Hello World,与其说第一个小程序,不如说微信开发者工具为我们创建了一个基础工程项目!然后,又开发了一个真正实现突破0的小程序- ...
微信小程序接口文档PHP,微信小程序API 导航
微信小程序API 导航一.wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. OBJECT 参数说明: 示例代码: ...
微信小程序之文档管理系统(含源码+论文+答辩PPT等)
项目功能简介: 该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的论文管理系统前台和Java做的后台管理系统: 微信小程序--论文管理系统前台涉及技术:W ...
微信小程序_文档_05_框架_组件_插件_多线程_兼容_优化
基础组件框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发. 详细介绍请参考组件文档自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定 ...
微信小程序_文档_08_组件_媒体组件_地图_画布_开放能力
audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口音频. 属性名类型默认值说明 id String au ...

微信小程序 -- (1)文档说明、配置项

微信小程序

1. 介绍

2. 小程序接入流程

创建第一个小程序项目

3. 文件结构

3.1 小程序项目的文件和文件夹

3.2 小程序包中包含的文件类型

1. `json`文件配置文件

2.`wxml`文件定义页面模板

3. `wxss`文件定义页面样式

4. `js` 文件定义页面脚本文件

4. 配置项

page.json配置项

pages配置项

window配置项

tabbar配置项

style配置项

sitemapLocation配置项

sitemap.json

5. 页面文档

app.wxss

app.js

wxss

6. rpx像素单位

微信小程序 -- (1)文档说明、配置项相关推荐

最新文章

热门文章

微信小程序 -- (1)文档说明、配置项

微信小程序

1. 介绍

2. 小程序接入流程

创建第一个小程序项目

3. 文件结构

3.1 小程序项目的文件和文件夹

3.2 小程序包中包含的文件类型

1. json文件 配置文件

2.wxml文件 定义页面模板

3. wxss文件 定义页面样式

4. js 文件 定义页面脚本文件

4. 配置项

page.json配置项

pages配置项

window配置项

tabbar配置项

style配置项

sitemapLocation配置项

sitemap.json

5. 页面文档

app.wxss

app.js

wxss

6. rpx像素单位

微信小程序 -- (1)文档说明、配置项相关推荐

最新文章

热门文章

1. `json`文件配置文件

2.`wxml`文件定义页面模板

3. `wxss`文件定义页面样式

4. `js` 文件定义页面脚本文件