原生微信小程序开发记录

news/2024/7/20 3:44:04 标签: 微信小程序, 小程序
1. 拿到项目 先构建

2.小程序与普通网页开发的区别

网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。而如上文所述,小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。

3.按需加载

"lazyCodeLoading": "requiredComponents"

4.配置scss

在project.config.json 文件 setting 加: 

  "setting": {
    "useCompilerPlugins": [
      "sass"
    ],
}

5.父子组件之间传值
事件传递

父组件:

<!-- parent-component.wxml -->
<child-component bind:childEvent="onChildEvent"></child-component>


// parent-component.js
Page({
  onChildEvent: function(event) {
    console.log('接收到子组件传递的值:', event.detail);
    // 处理从子组件传递过来的值
  }
})

子组件:

<!-- child-component.wxml -->
<button bindtap="onButtonClick">点击传递值</button>


// child-component.js
Component({
  methods: {
    onButtonClick: function() {
      var value = '需要传递的值';
      this.triggerEvent('childEvent', value); // 触发自定义事件,并传递值
    }
  }
})

数据绑定

父组件:

<!-- parent-component.wxml -->
<child-component value="{{value}}"></child-component>

// parent-component.js
Page({
  data: {
    value: '需要传递的值'
  }
})

子组件:

<!-- child-component.wxml -->
<view>{{value}}</view>


// child-component.js
Component({
  properties: {
    value: {
      type: String,
      value: '' // 设置默认值
    }
  }
})

6.配置文件引入路径:

全局配置文件app.json:

{
  "resolveAlias": {
    "~/*": "/*",
    "~/origin/*": "origin/*",
    "@utils/*": "utils/*",
    "subBUtils/*": "subpackageB/utils/*"
  }
}
7.(开发版、体验版、正式版)获取对应的环境配置信息

写个配置config.env.js 代码如下:

const envConf = {
  develop: {
    apiUrl: 'http://localhost:3000/api'
  },
  trial: {
    apiUrl: 'https://trial.example.com/api'
  },
  release: {
    apiUrl: 'https://api.example.com/api'
  }
}

module.exports = {
    env: envConf[__wxConfig.envVersion]
}

其他地方使用

import { env } from './config/config.env.js';

env.apiUrl  就可以了得到链接地址了

8.wx.getSetting()小程序>微信小程序提供的一个 API 方法,用于获取用户的当前设置信息。通过调用该方法,小程序可以获取到用户对小程序的授权信息,例如用户是否授权了小程序获取用户信息、地理位置、通讯录等权限。

wx.getSetting({
  success(res) {
    if (res.authSetting['scope.userInfo']) {
      // 用户已授权获取用户信息
      wx.getUserInfo({
        success(userInfoRes) {
          console.log(userInfoRes.userInfo);
          // 获取用户信息成功,可以在这里处理用户信息
        }
      });
    } else {
      // 用户未授权获取用户信息,可以引导用户打开授权设置页进行授权
    }
  }
});


http://www.niftyadmin.cn/n/5382282.html

相关文章

1.网络游戏逆向分析与漏洞攻防-游戏启动流程漏洞-测试需求与需求拆解

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;分析接收到的对话数据包 这是一个新的篇章&#xff0c;之前是关于把我们的东西放进游戏里和内存里的数据分析与利用&#xff0c;现在是专注于网络部分&#xff0c;通过分析网络数据包得到应用程序中各…

基于jieba、TfidfVectorizer、LogisticRegression的垃圾邮件分类,模型平均得分为0.98左右(附代码和数据集)

基于jieba、TfidfVectorizer、LogisticRegression的垃圾邮件分类,模型平均得分为0.98左右(附代码和数据集)。 垃圾邮件分类识别是一种常见的文本分类任务,旨在将收件箱中的邮件分为垃圾邮件和非垃圾邮件。以下是一些常用的技术和方法用于垃圾邮件分类识别: 基于规则的过…

Unity面试手册:初中级面试题

1.请简述ArrayList和List的主要区别&#xff1f; ArrayList存在不安全类型&#xff08;ArrayList会把所有插入其中的数据都当做Object来处理&#xff09;&#xff0c;装箱拆箱的操作&#xff08;费时&#xff09;&#xff0c;List是泛型类&#xff0c;功能跟ArrayList相似&…

国外高防服务器需要注意哪些方面

随着互联网的快速发展&#xff0c;网络安全问题日益突出&#xff0c;高防服务器逐渐成为企业和个人用户的首选。然而&#xff0c;在选择和使用国外高防服务器时&#xff0c;需要注意以下几个方面&#xff0c;以确保安全和稳定。 一、防御能力 首先&#xff0c;需要考虑国外高防…

【IDEA关闭项目一直转圈】

IDEA关闭项目一直转圈&#xff1a; IDEA启动时&#xff0c;会自动打开上次关闭时所有显示的窗口&#xff0c;如果本次工作不需要上次打开的所有窗口&#xff0c;可以基于选择窗口界面的右上角去关闭。 项目关闭失败 但是偶尔会出现窗口关闭时&#xff0c;一直显示“正在关闭项…

机器学习和统计学的区别?

1、本质区别&#xff1a; 目标&#xff1a;机器学习的核心目标是建立一个可以自动学习和改进的模型&#xff0c;以预测未知数据。它更关注结果的准确性和模型的泛化能力&#xff0c;通常不关心模型是否可以解释。而统计学的目标是探究变量之间的关系&#xff0c;理解数据的内在…

linux下ipconfig命令报:command not found 解决方法

参考博文&#xff1a; linux下ipconfig命令报:command not found 解决方法 CentOS7更新yum报Could not resolve host:mirrorlist.centos.org; Unknown error解决办法

深度学习---图像分割

图像分割 1 传统的基于CNN的分割方法缺点&#xff1f; 传统的基于CNN的分割方法&#xff1a;为了对一个像素分类&#xff0c;使用该像素周围的一个图像块作为CNN的输入&#xff0c;用于训练与预测&#xff0c;这种方法主要有几个缺点&#xff1a;    1&#xff09;存储开销…