微信小程序开发
JS 逻辑
// index.js
// 获取应用实例,必须声明一个页面(Page)才能使用
Page({
data:{
// 声明一个属性
mag:'nihao!'
},
// 事件的声明
edit() {
// 在事件中修改 data 中的属性
this.setData({
// 修改
mag:'hello'
})
}
})
navigator 的使用
<button bind:tap="edit">点击更改</button>
// bind:tap="edit" 相当于 @click="edit"
<!-- 绝对地址 -->
<navigator url="/pages/logs3/logs3">绝对地址跳转</navigator>
-----------------------------
<!-- 相对地址+taBar 页面 -->
<navigator open-type="switchTab" url="../logs/logs">相对地址</navigator>
-----------------------------
<!-- 跳转到其他小程序 -->
<navigator target="miniProgram" app-id="wx7696c66d2245d107">跳转蜜雪冰城</navigator>
app.json 相当于 main.js ,用来全局注册 js逻辑 的文件
//app.json
// 用来注册页面的
// 在此处配置后可以自动生成对应的文件夹
// 排在第一位的是首页
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
====================================
<!-- url 是要跳转的页面,这个页面一定要在 app.json 中的 pages 下注册 -->
<navigator url="/pages/logs">跳转页面</navigator>
//app.json
// 小程序的头部标题部分
{
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#bfc",
"navigationBarTitleText": "做人嘛,要开心",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
}
}
每个文件内都有 .json 文件用来单独设置当前页面的样式,在此处设置的文件会覆盖 全局注册的
尺寸单位(rpx)
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
image 标签的使用
<!-- aspectFit 保证缩放比,显示长边,宽 -->
<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" mode="aspectFit"/>
<!-- aspectFit 保证缩放比,显示短边,高 -->
<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" mode="aspectFill"/>
<!-- aspectFit 不保证缩放比,拉伸填满 -->
<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" mode="scaleToFill"/>
<!-- 自定义 -->
<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" class="imgBox" />
=======================================
//自定义
.imgBox{
width: 500rpx;
height: 300rpx;
}
轮播图
swiper:滑块容器。内只能写swiper-item。它的默认高度是150px;
swiper-item:滑块单元。它的大小是: 宽度 和 高度 为 100% * 100%;
// 轮播图
<!--
scroll-view 在页面中指定一个可以滚动的区域,并且这个可滚动的区域能够实现一些高级的交互,比如:下拉刷新等。
refresher-enabled 要放在 scroll-y 前面才能使用
-->
<scroll-view refresher-enabled scroll-y class="aside">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</scroll-view>
<view class="content">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
app.wxss 全局注册css样式,原理是在 page 上加样式
在 app.wxss 可以引入 字体图标,然后全局使用
/* icon 阿里图标 */
@font-face {
font-family: 'iconfont'; /* Project id 2604947 */
src: url('//at.alicdn.com/t/c/font_2604947_pz035iibwdk.woff2?t=1677898721975') format('woff2'),
url('//at.alicdn.com/t/c/font_2604947_pz035iibwdk.woff?t=1677898721975') format('woff'),
url('//at.alicdn.com/t/c/font_2604947_pz035iibwdk.ttf?t=1677898721975') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 一个放大镜 */
.icon-sousuo:before {
content: "\e602";
}
在 元素中的具体使用
<!-- 搜索框 -->
<view class="search-bar">
<input type="text" placeholder="输入搜索关键字" />
<text class="iconfont icon-sousuo"></text>
</view>