什么是微信小程序
标准的微信小程序是指使用微信自己开发的一套标签语言进行开发的项目,该标签语言分别对应着普通Web页面中的html,js,css等,展示在微信客户端的环境中。
因此真正的微信小程序在普通浏览器中是无法正常展示的,因为普通浏览器无法解析微信的标签语言;
微信小程序 & web项目
一个公众号中的网页,如果想在小程序中展示,另外开发一版感觉有点浪费资源,那么普通的 Web 开发是否展示在微信小程序中呢,这个是可以的,但是需要注意你的Web开发页面中是否存在web-view(微信浏览器)无法识别的代码,如果存在无法识别的代码,那么页面的展示可能存在问题;
但是如果你的 Web 页面能够在微信浏览器中正常展示,那么,就可以通过微信小程序的标签将 Web 项目嵌入微信小程序中,而不需要特意去开发标准版本的微信小程序,微信小程序嵌入 Web 页面的方式,
<web-view src="http://192.168.2.3:3000/#/submitpage"></web-view>
src属性为Web项目的域名或服务器地址
小程序开发工具
小程序官方网址
小程序项目目录
一个官方小程序目录
├── app.js ────────|
├── app.json 全局页面设置 ────────|小程序主体部分
├── app.wxss ────────|
|
└── utils ────────|小程序公用方法部分
├── pages ────────|小程序具体页面部分
│ │── index 一个小程序页面
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json 局部页面设置
│ │ └── index.wxss
│ └── logs 一个小程序页面
│ ├── logs.wxml
│ └── logs.js
小程序代码组成
- json 页面配置,静态配置文件
- wxml 页面结构,全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言
- 属性绑定: attr-name ="{{test}}" 双引号必需
- 逻辑: {{ 变量名 }}
- 条件:wx:if="{{condition}}" wx:elif wx:else
- 循环: 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
- wx:for="{{array}}" 数组
- wx:for-index=“idx” 索引
- wx:for-item=“itemName” 当前项
- wx:key=“unique” 指定列表中项目的唯一的标识符,为 item 中的字段属性,不能写成item.unique
- 大小写敏感
- 标签严格闭合
- 没有被定义的变量的或者是被设置为 undefined 的变量不会展示
- wxss 页面样式表,全称是 WeiXin Style Sheets,是一套用于小程序的样式语言,用于描述WXML的组件样式
- 引用方式:@import url(’./test_0.css’)
- 引用方式:@import ‘./test_0.wxss’
-
WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。
- js 页面逻辑,主要开发语言是 JavaScript
主体部分
小程序的入口
小程序在使用之前需要注册,并且只能在根目录的app.js文件只能够注册,调用构造函数:
APP({
onLaunch: function () {//生命周期方法
},
……
globalData: {//全局数据
}
})
全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
pages | string[] | 是 | 页面路径列表 | |
sitemapLocation | string | 是 | 指明 sitemap.json 的位置 | |
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
networkTimeout | Object | 否 | 网络超时时间 | |
debug | boolean | 否 | 是否开启 debug 模式,默认关闭 | |
functionalPages | boolean | 否 | 是否启用插件功能页,默认关闭 | 2.1.0 |
subpackages | Object[] | 否 | 分包结构配置 1.7.3 | |
workers | string | 否 | Worker 代码放置的目录 | 1.9.90 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力,如「音乐播放」 | |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
preloadRule | Object | 否 | 分包预下载规则 | 2.3.0 |
resizable | boolean | 否 | iPad 小程序是否支持屏幕旋转,默认关闭 2.3.0 | |
navigateToMiniProgramAppIdList | string[] | 否 | 需要跳转的小程序列表,详见 wx.navigateToMiniProgram 2.4.0 | |
usingComponents | Object | 否 | 全局自定义组件配置 | 开发者工具 1.02.1810190 |
permission | Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
style | string | 否 | 指定使用升级后的weui样式 | 2.8.0 |
useExtendedLib | Object | 否 | 指定需要引用的扩展库 | 2.2.1 |
entranceDeclare | Object | 否 | 微信消息用小程序打开 | 微信客户端7.0.9 |
window (Object )配置
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 | |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white | |
navigationBarTitleText | string | 导航栏标题文字内容 | ||
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。 | 微信客户端 6.6.0 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light | |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。详见 Page.onPullDownRefresh | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px。详见 Page.onReachBottom | |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 2.4.0 (auto) / 2.5.0 (landscape) |
全局样式
app.wxss默认入口文件,可以引入其他通用样式
通用工具类
util中可以写一些通用的方法等
页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,除去具有全局设置中window的所有属性,还有以下属性:
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
disableScroll | boolean | false | 设置为true则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置 | |
usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性。