微信小程序开发初使用

原创已于 2023-06-07 18:23:03 修改 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2023-06-07 08:44:08 首次发布

微信小程序开发

JS 逻辑

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

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

  // 事件的声明
  edit() {

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

navigator 的使用

// 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
  }
}

全局配置 | 微信开放文档 (qq.com)

每个文件内都有 .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>