小程序开发经验

妮呀

已于 2023-10-10 16:53:22 修改

阅读量315

点赞数

文章标签：前端微信小程序

于 2023-09-08 18:02:42 首次发布

本文链接：https://blog.csdn.net/lln0001/article/details/131290528

版权

基础知识

wxss语法

//样式导入
@import "common.wxss";

wxml语法

// 变量
<view> {{message}} </view>
//列表
<view wx:for="{{array}}" >{{index}} - {{item}} </view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item" wx:key="label"> {{item}} </view>
//条件
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
//模板
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>

应用的生命周期

生命周期	说明
onLaunch	初始化完成时除非，全局只触发一次
onShow	启动，或者从后台进入前台显示时触发（常用）
onHide	前台进入后台时触发
onError	脚本错误或者API调用报错时触发
onPageNotFound	页面不存在时
onUnhandledRejection	有未处理的Promise拒绝时
onThemeChange	监听系统主题变化

页面的生命周期

生命周期	说明
onLoad	页面加载（常用）
onShow	页面显示（常用）
onHide	页面隐藏（用于终止任务）
onUnload	页面卸载（用于终止任务）

组件的生命周期

生命周期	说明
created	页面加载（不要在此处调用setData）
attached	页面显示（常用）
ready	初次渲染完成
moved	在组件实例被移动到节点树另一个位置时执行，页面隐藏
detached	页面在组件实例被从页面节点树移除时（常用）
error	异常抛出

生命周期执行顺序

– 打开小程序：
（App）onLauch --> （App）onShow --> （Pages）onLoad–> （Pages）onShow --> （Pages）onReady

– 切换页面：
（Pages）onHide --> （Next Pages）onShow --> （Next Pages）onReady --> （Next Pages）onReady

– 返回上一页：
（Pages）onHide --> (Pre Pages) onShow

– 离开小程序
（App）onHide

– 再次进入

小程序若未销毁 : （App）onShow --> （Pages）onLoad–> （Pages）onShow --> （Pages）onReady
小程序已销毁 : （App）onLauch --> （App）onShow --> （Pages）onLoad–> （Pages）onShow --> （Pages）onReady

页面跳转

wx.navigateTo 跳转后，依然保留旧页面。 wx.navigateBack 可返回原页面。新页面入栈。
wx.redirectTo 不保留原页面 onUnload 掉。当前页面出栈，新页面入栈。
wx.switchTab 跳转到tabBar页面，并关闭其他非tabBar的页面。全部出栈，只留最新。
wx.navigateBack 关闭当前页，并返回上一个页面。不断出栈。
wx.reLaunch 关闭所有页面，打开到应用内的某个页面，返回时候跳到首页。全部出栈，只留最新。

js文件绝对路径使用方式

在app.json配置上resolveAlias

"resolveAlias": {
    "~/*": "/*"
  },

在任意文件上就可以使用

import BackToTop from '~/controller/BackToTop ';

组件封装

子组件封装

// 组件
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    value: {
      value: "",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  lifetimes: {
    created() {
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    confirmPopup(e) {
      this.triggerEvent('input', e.detail)
    }
  }
})

页面调用

//index.wxml
<date-picker  model:value="{{ form.createTime }}" 
        data-prop="createTime" bind:input="handleSaveForm"></date-picker>

//index.json
"usingComponents": {
    "date-picker": "/components/DatePicker/index"
}

自定义title

方法一：

//index.json
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#0B89FF",
"navigationBarTextStyle": "white",
}

方法二：

wx.setNavigationBarTitle({
        title: '首页'
    })

方法三：

//index.json
"navigationStyle": "custom",

//样式覆盖
Page ({
data: {
	//title 文字定位，需和右侧工具栏对齐
    header: {
      top: 0,
      height: 0,
    },
 },
 onLoad(options) {
    this.initTopImg()
  },
  initTopImg() {
    let menuButtonInfo = wx.getMenuButtonBoundingClientRect();

    this.setData({
      'header.top': menuButtonInfo.top,
      'header.height': menuButtonInfo.height
    })
  }
})

//wxml就各自发挥了

图片自适应

-image

<image src="{{src}}" mode="widthFix"></image>

自定义底部tabbar

修改 app.json

//app.json
"tabBar": {
    "custom": true,
    "color": "#333",
    "selectedColor": "#0083FF",
    "borderStyle": "white",
    "backgroundColor": "#292929",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/clue/index",
        "text": "线索"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的"
      }
    ]
  },

根目录新增custom-tab-bar组件

//custom-tab-bar/index.js
// custom-tab-bar/index.js
import { checkLogin, checkRegister, checkUserStatus } from '../utils/permission';
const tabList = [
  {icon: 'icon-home', label: '首页', path: '/pages/index/index'},
  {icon: 'icon-xiansuoguanli', label: '线索', path: '/pages/clue/index'},
  {icon: 'icon-wodexiao', label: '我的', path: '/pages/my/index'},
];
function getTabIndex() {
  let pages = getCurrentPages();
  let currentRoute = pages[pages.length - 1];
  if (!currentRoute) {
    return -1;
  }
  let path = currentRoute.route;
  let currentPath = '/' + path;
  let index = tabList.findIndex((menu)=>menu.path == currentPath);
  console.log('getTabIndex:', index)
  return index;
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
    active: getTabIndex(),
    list: tabList
  },
  ready() {
    this.resetActivePath()
    let that = this;
    wx.onAppRoute((res)=>{
      let currentPath = '/' + res.path;
      let index = this.data.list.findIndex((menu)=>menu.path == currentPath);
      if (index > -1) {
        that.setData?.({
          active: index
        })
      }
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    resetActivePath() {
      let index = getTabIndex();
      if (index > -1) {
        this.setData?.({
          active: index
        })
      }
    },
    onChange(e) {
      let index = e.currentTarget.dataset.index;

      if (index == 0) {
        wx.switchTab({
          url: this.data.list[index].path
        })
      } else {
        let path = this.data.list[index].path.slice(1);
        getApp().getUserInfo((userInfo)=>{
          let isLogin = checkLogin(userInfo, path);
          if (!isLogin) {
            return false;
          }
          
          let isRegister = checkRegister(userInfo, path);
          if (!isRegister) {
            return false;
          }
        
          let isUserStatusAllow = checkUserStatus(userInfo, path);
          if (!isUserStatusAllow) {
            return false;
          }
          wx.switchTab({
            url: this.data.list[index].path
          })
        })
      }
    }
  }
})

隐藏滚动条

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

字体

至少30rpx，28rpx偏小

环境变量配置

const accountInfo = wx.getAccountInfoSync();
var envs = {}
// env类型
var env = ""
const baseApi = {
  // 开发版
  develop: "https://develop.com",
  // 体验版
  trial: "https://trial.com",
  // 正式版
  release: "https://release.com"
};
//当手机处于低版本的情况下
if (!accountInfo.miniProgram.envVersion) {
  // console.error("获取运行环境失败!");
  envs = "https://release.com"
} else {
  env = accountInfo.miniProgram.envVersion
  // request请求baseURL
  envs = baseApi[env];
}

module.exports = envs;