原生微信小程序开发记录

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.hqwc.cn/news/478376.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML世界核心

目录 一、基本文档(Basic Documentation) 二、基本标签(Basic Tags) 三、文本格式化(Formatting) 四、链接(Links) 五、图片(Images) 六、样式/区块(Styles/Sections) 七、无序列表(Disorder List) 八、有序列表(Sequence List) 九、定义列表(Definin…

开发消息多发工具需要用到的源代码

在数字化时代&#xff0c;消息传递是许多应用程序的核心功能之一&#xff0c;从社交媒体到企业通信&#xff0c;从个人聊天到群发消息&#xff0c;消息传递无处不在&#xff0c;为了满足这种需求&#xff0c;开发者经常需要创建或定制消息多发工具。 这些工具通常需要处理多个…

【ansible】自动化运维ansible之playbook剧本编写与运行

目录 一、ansible剧本playbook的组成 二、palybook的基础应用: 实操1&#xff1a;通过palybooks完成nginx的安装 第一种&#xff1a;通过yum安装nginx 第二种&#xff1a;通过编译安装nginx 实操2&#xff1a;playbook定义、引用变量​​​​​​​ 实操3&#xff1a;通过…

【9】知识存储

一、图数据库neo4j Neo4j是一个高性能的,NOSQL图形数据库&#xff0c;它将结构化数据存储在网络上而不是表中。它是一个嵌入式的、基于磁盘的、具备完全的事务特性的Java持久化引擎。单节点的服务器可承载上亿级的节点和关系&#xff0c;单节点性能不够时也可进行分布式集群部…

第一件事 什么是 Java 虚拟机 (JVM)

1、什么是虚拟机&#xff1f; - 这个其实是一个挺逗的事情&#xff0c;说白了&#xff0c;就是基于某个硬件架构&#xff0c;在这个硬件部署了一个操作系统&#xff0c;再构架一层虚拟的操作系统&#xff0c;这个新构架的操作系统就是虚拟机。 不知道的兄弟姐妹们&#xff0c;…

全国乙卷高考理科数学近年真题的选择题练一练和解析

虽然很多中小学才陆陆续续开学&#xff0c;但是高三的学子们一定是过年的时候也在抓紧备考&#xff0c;毕竟&#xff0c;距离2024年高考只剩下不到四个月了。 如何在最后四个月的时间提高成绩&#xff1f;以高考真题为抓手是一个不错的方法&#xff0c;因为真题都是严格遵循考试…

大数据信用报告查询方式一般有几种?哪种比较好?

在了解这个问题之前&#xff0c;想必你对大数据信用与人行信用的区别都是比较清楚了&#xff0c;本文呢就着重讲一下大数据信用报告查询方式有几种&#xff0c;哪种比较好&#xff0c;感兴趣的朋友不妨一起去看看。 大数据信用报告常见的三种查询方式&#xff1a; 一、二维码分…

处理MIGO 采购订单过账报错:物料账簿货币被更改

同事操作MIGO 采购订单过账报错&#xff1a;物料账簿货币被更改。 跟据查资料检查一下OKKP的配置。进去后发现了另一个报错&#xff1a; 然后再查资料&#xff0c;让检查一下SCC4的配置。经查看&#xff0c;发现是顾问copy client是忘记填写client的货币了。我维护好后&#xf…

ADS-B Receiver Module TT-SC1 for UAV and Drones

目录 Introduction Applications Main features Technical parameters Basic technical information Electrical specification Recommended operation conditions General electrical parameters Introduction TT-SC1 is a high quality and low price OEM ADS-B…

Mysql如何优化数据查询方案

mysql做读写分离 读写分离是提高mysql并发的首选方案。 Mysql主从复制的原理 mysql的主从复制依赖于binlog&#xff0c;也就是记录mysql上的所有变化并以二进制的形式保存在磁盘上&#xff0c;复制的过程就是将binlog中的数据从主库传输到从库上。 主从复制过程详细分为3个阶段…

SQL查询转化为 Elasticsearch 查询

使用SQL 转化为查询 Elasticsearch 支持 sql 语句转化为 elasticsearch 的 查询语句 第一步&#xff1a; 打开在线转换工具的网页&#xff0c;进入工具页面 第二步&#xff1a;在指定的输入框中输入需要转换的 sql 语句。 您学会了这么简单的办法

3个密码学相关的问题

一、离散对数问题&#xff08;Discrete Logarithm Problem, DLP&#xff09; 问题描述&#xff1a;给定 有限阿贝尓群 G中的2个元素a和b&#xff0c;找出最小的正整数x满足&#xff1a;b a ^^ x &#xff08;或者证明这样的x不存在&#xff09;。 二、阶数问题&#xff08;O…