微信小程序 MiniApp

发表于 更新于

说明：%%是注释%%

程序设计

  1. 首先写<view class="class_name"></view> 来结构化设计；每个class对应一个css样式
<view class="container">
  <image class="avatar" src="../images/avatar/avatar-1.jpg"></image>
  <text class="motto">Welcome, Orange Can</text>
  <view class="journey-container">
    <text class="journey">Start your journey of miniprogram</text>
  </view>
</view>
  1. css中放样式信息，写法如下；全局样式可以放app.css
/* 示范写法 */
.class_name{
    attribute: rpx;
    location_attribute: center;
}
/* 一般网页可以这样布局 */
.container{ /* 最外层的<view> */
  display: flex; /* 布局方式 */
  flex-direction: column; /* 列，从上到下；reverse是从下到上；可选row */
  align-items: center; /* 居中 */
}
  1. 全局配置app.json
{
  "pages": [
    "pages_folder/folder/html"  %% 没有.html后缀！
  ],
  "window": [ %% 小程序顶部菜单栏
    "attribute1": "argument1", 
    "attribute2": "argument2"
  ]
}
  1. js文件结构：用于匹配数据
Page( {
  data:{ // 数据文件，在html中用 {{ (object.)attribute([index]) }} 匹配使用
    object: {
      array: [108]
    },
    date: "2024-4-2",  
    title: "Title of article",
    path: "/image/image.png"
  },
  onLoad: function(options){ // 注意最新版为onLoad(options)，下同
    // 页面初始化 options 为页面跳转所带来的参数
    var newAttribute = {
      attribute: argument
    },
    
    this.setData({
      title: "New Title" // 将会修改上面data里title的值
      postData: newAttribute // 把上面的参数加入data中，此时需要用{{ postData.attribute }}
    })
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function(){
    //页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function(){
    // 页面关闭
  }
})
  1. 隔离数据：把数据存储在根目录data/data.js下
// data.js 存储
var data = []

module.export = { // 暴露模块接口
  postList: data
}

// page.js 使用
var dataObj = requre("/data/data.js") // 注意需要后缀名

Page({
  this.setData({
    postList: dataObj.postList
  })
})
  1. html模板
<!-- template.html -->
<template name="templateName">
  <!-- 模板内容，记得带{{ attribute }} -->
</template>

<!-- page.html -->
<import src="post-item/post-item-tpl.wxml" />  <!-- 导入模板 -->

<block wx:for="{{ postList }}" wx:for-item="item" wx:for-index="idx">
  <template is="postItemTpl" data="{{ ...item }}" />  <!-- 使用...item，就不需要变量名和template匹配，template也不用item.attribute了 -->
</block>
  1. css模板
/* 导入 */
@import "post-item/post-item-tpl.wxss";

  1. 缓存
App({
  onLaunch: function() {
    // 尝试读取缓存，所以参数直接写'postList'；如果没有此参数就是没有缓存
    var storageData = wx.getStorageSync('postList'); 
    if (!storageData) { // 缓存不存在
      var dataObj = require("data/data.js")
      wx.clearStorageSync(); // 清空本地缓存
      wx.setStorageSync('postList', dataObj.postList) // 保存数据到缓存
    }

    // 异步写法
     wx.setStorage({
       key: "postList",
       data: dataObj.postList,
       success: function(res) {
         // success
       },
       fail: function(res) {
         // fail
       },
       complete: function() {
         // complete
       }
     })
    
  },
})

组件

  • 表单
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="title_class_name">Name</view> <!-- 表单标题 -->
    <input class="input_class_name" placeholder-class="place-holder" name="realname " placeholder="Type your name" value = "{{ uersInfo.realname }}" />
    <!-- placeholder: 表单提示文本 -->
    hello
</form>
  • 链接、跳转
<button catch:tap="tapName"></button>
<!-- bind:tap 会向之前的界面传数据；catch:tap 不会 -->
wx.navigateTo({ // 1. 保留页面跳转；但是太多层级不好
  url: '../page_folder_name/page_name',  // 不需要后缀名.html
})

tapName: function(event) {
  wx.redirectTo({  // 这个也可以，重定向；2. 关闭页面跳转，没有返回按钮
    url: '../post/post',
    success: function() {
      console.log("jump success")
    },
    fail: function() {
      console.log("jump fail")
    },
    complete: function() {
      console("jump complete")
    }
  });
}

wx.swtichTap // 跳转tabbar界面，并关闭非tabbar界面
  • 按钮
<button type="primary" bindtap="tapName" >Hello World!</button>
  • 弹窗
tap_name: function() {
  wx.showToast({
    title: 'fail', // the content will show to user
    icon: 'loading', // success, fail
    duration: 2000,
  });
}
  • 图片
<image background-size="cover" class="userinfo-avatar" src="foldername/your_photo.png"
mode="aspectFill">content</image>
<!-- mode: aspectFit 容器内完整显示缩放；aspectFill 填充缩放；widthFix 自适应完全显示 -->
<!-- content will show on the bottom of the photo -->
  • 轮播图（横向滚动切换的图片）
<swiper indicator-dots="true" vertical="true" autoplay="true" interval="5000">
  <!-- indicator-dots：每张图片一个小圆点，autoplay：自动播放，interval：换片间隔5秒，vertical：垂直小圆点 -->
  <swiper-item>
    <image src="../images/post/post-1.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="../images/post/post-2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="../images/post/post-3.jpg"></image>
  </swiper-item>
</swiper>
/* 注意，css要写两个才能起作用 */
swiper{
  width: 100%;
  height: 600rpx;
}

swiper image{
  width: 100%;
  height: 600rpx;
}