utils:存放工具性质的模块
app.js：小程序项目的入口文件（项目全局的配置文件）
app.json：小程序项目的全局配置文件
app.wxss：小程序项目的全局样式文件
project.config.json：项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信搜索
【app.json】
pages:用来记录小程序所有页面的路径
window:全局定义小程序所有页面的背景色，文字颜色等
style:全局定义小程序组件所使用的样式版本
sitemapLocation:对应下方的对应json
【project.config.json】
setting：保存编译相关的配置 （点击详情-本地设置-勾选状态与之相对应匹配）
projectname:项目名称
appid:小程序的账号ID
【sitemap.json 】
rules：索引规则
action:"allow" 都允许被索引 “disallow”不允许
page:"*":所有页面
如果不想看到黄色的警告信息-需要projest.config.json的setting中配置字段check SiteMap
页面的.json会覆盖全局的.json
创建一个新的页面：app.json中，直接写路径，可以直接创建页面下的四个文件
修改项目首页：调整pages中的页面顺序 app.json中调整顺序，排第一的是首页
WXML 相当于 HTML
区别① 标签名称不同
HTML（div,span,img,a）
WXML（view,text,image,navigator）
区别②属性节点不同
<a href="#">超链接</a>
<navigator url =“/pages/home/home”></navigator>
区别③提供了类似于Vue中的模板语法
数据绑定-列表渲染-条件渲染
常见的组件：
①view:相当于div
②scroll-view 滚动的列表效果
③swiper:轮播图 swiper-item：轮播图项
image 的mode 属性用来指图片的剪裁和缩放
mode值：scaleToFill (默认值)【不保持】横纵比缩放图片，图片的宽高填满至image元素
aspectFit 缩放模式【保持】横纵比缩放图片，使图片的长边能完全展示出来--完整的将图片显示出来
aspectFill 保持纵横缩放图片，只保证图片的短边能完全展示，通常只在水平或者垂直方向是完整的
widthFix 宽度不变，高度自动变化
heigthFix 宽度不变，高度自动变化
小程序API的3大分类
【事件监听API】
特点：以on开头，用来监听某些事件的触发
【同步API】
特点1：以Sync结尾的API
特点2：同步API的执行结果，可以通过函数返回值直接获取，错误会抛出异常
【异步API】
特点：类似于jQuery中的$.ajax(options)函数，需要通过succes、fail、complete接收调用的结果
【WXML】语法模板
①在data中定义数据，在WXML中使用数据
例：
(动态绑定内容)
[.js文件中 ]
data： info='hello word'
[.wxml文件中]
<view>{{info}}</view> 这时，页面展示为hello word
(动态绑定属性)
[.js 文件中]
data：image=‘111111.png’
[.wxml文件中 ]
<image src="{{image}}"> </image>
(三元运算)
[.js文件中]
data：randNum:Math.random()*10 //随机10位数
randNum:Math.random().toFixed(2) //保留2位小鼠
[.wxml文件中]
<view>{{randNum}}</view> // 查看随机数是什么
<view>{{randNum >=5 ? "大于5":"小于5"}} </view>
事件绑定
类型:tap 绑定方式 bindtap或bind:tap 点击事件相当于click
类型:input 绑定方式 bindinput或bind:input 文本框输入事件
类型:change 绑定方式 bindchange或bind:change 状态改变时触发事件
bindtap点击事件基础
[.wxml文件中]
<button bindtap="Btn">按钮</button>
[.js文件中]
与data平级，定义一个按钮点击事件
Btn(e){
console.log(e)
},
bindtap点击事件绑定，实现count+1[
[.wxml文件中]
<button bandtap="CountAdd">Count+1</button>
[.js文件中]
//[data]中添加一个count值 ，即：
count：0
//与data平级，定义一个按钮点击事件
CountAdd(e){this.setData({
//this.setData 是一个方法，可以给页面data中的数据重新赋值
conut：this.data.count+1
})
}
事件传参 不能在绑定事件的同时为事件处理函数传递参数
实现传参自增3
[.wxml文件中]
<button bandtap="CountAdd3" data-liyuadd3="{{3}}">Count+3</button>
//data-后面加自己取的名，data-放传参的
[.js文件中]
//【data】中添加一个count值 ，即：
count：0
//与data平级，定义一个按钮点击事件
CountAdd3(e){
this.setData({
count：this.data.count+e.targer.dataset.liyuadd3
//targer.dataset.liyuadd3 固定写法 如果不记得可以先打印e
}) C
ountAdd3(e){
console.log(e)
} }
// 查看console查找路径
bindinput事件绑定
[.wxml文件中]
<input bindinput="Inptext" style=" border: 1px; color: red;border: 1px solid red;"></input>[.js中]
Inptext(e){
console.log(e.detail.value) //e.detail.value获取输入框当中最新的值
}
实现文本框和data之间的数据同步
[.wxml文件中]
<input bindinput="Inptext" style=" border: 1px; color: red;border: 1px solid red;" value="{{message}}"></input>
.js中 【data】中添加一个message值 ，即：
message:One Place
与data平级，定义一个按钮点击事件
Inptext(e){
message:e.detail.value
}
条件渲染
[.wxml文件中]
<view wx:if="type === 1">AAA</view>
<view wx:elif="type === 2">BBB</view>
<view wx:else>其他</view>
[.js中 ] 【data】中添加一个type值 ，即：
type=1
//输出结果为AAA<block>控制多个组件的展示和隐藏 不会被渲染成任何组件，只起到包裹的作用
<block wx：if="{{true}}"> if="{{true}}",页面展示 One Two Three if="{{False}}",页面不展示 One Two Three
<view>One</view>
<view>Two</view>
<view>Three</view>
</block>
hidden隐藏
[.wxml文件中]
<view hidden="{{flag}}"> //条件为true则隐藏，false则显示</view>
.js中 【data】中添加一个flag值 ，即：
flag：true
for循环的基本用法
[.wxml文件中 ]
<view wx:for="{{Arrey}}">索引是{{index}},item项是{{item}}</view> // 默认的key是index
[.js中 ] 【data】中添加一个flag值 ，即：
Array:["路飞","山治","娜美"]
手动指定索引和当前项的变量名
.wxml文件中
<view wx:for="{{Arrey}}" wx:for-index="innnn" wx:for-item="itttt">索引是{{innnn}},item项是{{itttt}}</view>
.js中 【data】中添加一个flag值 ，即：
Array:["路飞","山治","娜美"]
指定key值提高渲染效率
.js中 【data】
TestList:[
{id:1,name:"liyu1"},
{id:1,name:"liyu2"},
{id:1,name:"liyu3"}
]
.wxml文件中
<view wx:for="{{TestList}}" wx:key="id">{{item.name}}</view>数组的格式：["","",""]
列表的格式：[{},{},{}]
rpx实现原理，把宽度分为750个rpx，在不同的手机屏幕上，自适应
1rpx=0.5px=1物理像素 用rpx会自动放大缩小，适用于不同屏幕的适配
样式导入 @import后跟需要导入的外联样式表的相对路径，";"结尾
@import 语法格式
@import + 相对路径 + ;
定义在app.wxss中的样式为全局样式，作用于每一个页面
【下拉刷新】
window配置下拉刷新样式 【全局开启下拉刷新】
app.json window 加上enablePullDownRefresh:true
指定下拉刷新时窗口的背景色
app.json window 加上backgroundColor
设置下拉刷新样式
app.json window 更改backgroundCTextStyle 值为dark(灰色) 值为light(白色)
上拉触底[加载数据]一般不需要修改
app.json window 加上onReachBottomDistence:100 页面内容距离底部不足100px的时候，会加载下一页内容，默认是50px
【tabBar】
tabBar数量：最少2个，最多5个
顶部tabBar不显示icon 只显示文本
【tabBar】的6个组成部分
①backgroundColor:tabBar背景颜色
②iconPath:(未选中)时候图片的路径
③selectedIconPath:[选中]时候图片的路径
④borderStyle：上边框颜色
⑤selectedColor:tab上的文字[选中]时的颜色
⑥color：tab上的文字(未选中)时的颜色
小程序只能请求https类型的接口，必须要将接口的域名添加到信任列表中 (右上角详情-->项目配置-->域名信息)
【配置request合法域名】
需求：希望请求
https://www.wscook.cn/域名下的所有接口
步骤：登录微信小程序管理后台->开发->开发设置->服务区域名->修改request合法域名
注意：①小程序只能请求https类型的接口
②域名不能使用IP地址或localhost
③域名必须经过ICP备案
④服务器域名一个月最多可修改5次
如果没有提供https的接口，可以临时开启不校验请求域名进行开发。。。
步骤：详情->本地设置->不检验合法域名、web-view（业务域名）.......
发送GET请求 wx.request()方法
[.wxml文件中]
<button bindtap="FsGet"> 发送Get请求</button>
FsGet(){
wx.request(){
url:"地址",
method:"GET", POST请求只需要更改GET 为 POST
data{
参数1
参数2
},
success：(res)=>{
console.log(res)
}
}
}在页面刚加载时请求数据 onLoad方法
[.js中]
onLoad:function(opction){
this.FsGet(),
this.FsPost()
} 调用GET、POST请求方法
关于跨域和Ajax的说明
跨域问题：跨域问题只存在于Web，由于小程序不是基于
浏览器的，所以小程序中不存在跨域问题
Ajax技术：Ajax的核心是以来于
浏览器中的XMLHttpRequest这个对象，由于小程序的宿主是微信客户端，所以小程序
不能叫‘发起Ajax请求’，应该叫“
发起网络数据请求”
轮播图属性
indicator-dots：是否显示版面指示点 true/false
indicator-color：指示点的颜色 #aabbcc/white
indicator-active-color：当前选中的指示点的颜色
#aabbcc/white
autoplay：是否自动切换
true/false
interval：自动切换时间间隔 1000毫秒
cirular：是否采用衔接滑动
true/false
扫一扫
1106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
