微信小程序-开端

常用基本元素标签

类型名称	作用	是否必须存在
.wxml	用于页面的布局结构，相当于网页中 .html 文件	是
.wxss	用于页面的样式，相当于网页中的 .css 文件	否
.js	用于页面的逻辑	是
.json	用于页面的配置	否

JS 逻辑的基本格式

// index.js
// 获取应用实例,必须声明一个页面（Page）才能使用
Page({
  data:{

    // 声明一个属性
    mag:'nihao!'
  },

  // 事件的声明
  edit() {

    // 在事件中修改 data 中的属性
    this.setData({
      // 修改
      mag:'hello'
    })
  }
})

navigator 标签的使用

bind:tap="edit"   相当于    @click="edit"

<button bind:tap="edit">点击更改</button>

<!-- 绝对地址 -->
<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
}
}

官方文档地址：developers.weixin.qq.com/miniprogram…

常见文件名的作用

文件名	作用	是否必须存在
app.js	小程序入口（首先执行的文件）	是
app.json	小程序的全局配置	是
app.wxss	小程序的全局样式	否
project.config.json	小程序开发者工具配置	是（会自动创建）
sitemap.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>