小程序的开发得安照腾讯的要求来,但是它也是把html-css-js 封装集成罢了(还有个json),学一下它的基础语法。
语法思想跟vue差不多
- html-wxml
- js-js
- css -wxcss
- json
全局配置
- 位于app.json 中
属性 | 类型 | 必填 | 语义 |
---|---|---|---|
entryPagePath | string | 否 | 小程序默认启动首页 |
pages | string[] | 是 | 页面路径列表 |
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 | 否 | PC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭 2.3.0 |
usingComponents | Object | 否 | 全局自定义组件配置 开发者工具 1.02.1810190 |
permission | Object | 否 | 小程序接口权限相关设置 微信客户端 7.0.0 |
sitemapLocation | string | 是 | 指明 sitemap.json 的位置 |
style | string | 否 | 指定使用升级后的weui样式 2.8.0 |
useExtendedLib | Object | 否 | 指定需要引用的扩展库 2.2.1 |
entranceDeclare | Object | 否 | 微信消息用小程序打开 微信客户端7.0.9 |
darkmode | boolean | 否 | 小程序支持 DarkMode 2.11.0 |
themeLocation | string | 否 | 指明 theme.json 的位置,darkmode为true为必填 开发者工具 1.03.2004271 |
lazyCodeLoading | string | 否 | 配置自定义组件代码按需注入 2.11.1 |
注意window对象中backgroundColor 是下拉刷新颜色
{
"pages":[
"pages/demos/demo01",
"pages/demos/color",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#cca4e3",
"navigationBarTitleText": "余小C_C",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true,
"backgroundColor": "#e0f0e9"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [
{
"pagePath": "pages/demos/demo01",
"text": "首页",
"iconPath": "icon/home_page.png",
"selectedIconPath": "icon/home_page_selected.png"
}, {
"pagePath": "pages/demos/color",
"text": "色卡",
"iconPath": "icon/color.png",
"selectedIconPath": "icon/color_select.png"
}
],
"color": "#1e131d6",
"selectedColor": "#065279"
}
}
页面配置:每个页面的单独配置 但是只能覆盖window属性
xx.json
{
"usingComponents": {},
"navigationBarTitleText": "余小C_C-首页 "
}
sitemap配置:其实就是别人搜索小程序时你的索引关键词。
后面再弄
模板语法重点:
text相当于span 行内元素 标签
view 相当于div标签
- 数据绑定:
- js中设置
- {{}}调用即可跟vue差不多
- 对象不可直接调用
data: {
msg:"233",
num:1234,
isbooll:true,
person:{
age:10,
name:"余小c"
}
},
<view>{{msg}}</view>
<view>{{num}}</view>
<view>{{isbooll}}</view>
<view>{{person.name}}</view>
<view data-index="{{num}}">自定义属性</view>
<checkbox checked="{{isbooll}}"></checkbox>
<!-- {{}}不要加空格 -->
表达式
<!-- {{}}1.可以进行表达式运算 和vue差不多
数字加减 字符拼接 三元表达式 等
2.语句 if else switch do while for 等
-->
<view>{{1+1}}</view>
<view>{{"1"+"1"}}</view>
<view>{{3>2 ? '233' : "ddd"}}</view>
对象数组循环:
<!-- 数组 对象
列表循环 1.wx:for="{{数组或者对象}} wx:for-item="item"
wx:for-index="index""
2.wx:key = "唯一的值"
3.嵌套循环注意 item 不要一样
-->
<view>------</view>
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">{{index}}{{item.name}}</view>
</view>
<!-- 占位符 文字保留 标签去掉-->
<block>
77
</block>
<!--pages/demos/demo02.wxml-->
<text>pages/demos/demo02.wxml</text>
<!-- 定义模板 -->
<template name='tem'>
<view>
<text> {{index}}: {{msg}} </text>
</view>
</template>
<!-- 声明模板并传入数据,is可以使用表达式 -->
<template is="tem" data="{{...item}}"/>
<!-- 引入外部模板 -->
<!-- <import src='xxx.wxml'> -->
<!-- import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。 -->
<!-- include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置 -->
wxs
<wxs module="tool">
var x = "23456";
module.exports = {
x : x,
};
</wxs>
<view>{{tool.x}}</view>
<view></view>
<!-- module.export.msg = x;单个 -->
<!-- 其实就是封装的js 一个wxs标签或者文件有自己的作用域 外部调用 moudle.export 对外共享私用变量 -->
<!-- 其他与js基本差不多 -->
require 引入模块。返回模块通过 module.exports 或 exports 暴露的接口。
自定义组件:
父向子传数据:properties: 属性值传值,
子向父:
组件:triggerEvent(“自定义事件名”,{对象数据});
父:<fristTab tabs="{{tabs}}" bind自定义事件名="接收方法"></fristTab>
绑定事件 bind 加事件名
注意一般小程序不允许操作dom元素
做法: 通过绑定事件操作data 从而改变视图层。