原生微信小程序开发记录

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.mzph.cn/news/689562.shtml

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

相关文章

【HarmonyOS】鸿蒙开发之Slider组件——第3.5章

组件应用场景: 设备音量大小&#xff0c;调节屏幕亮度等需求 slider组件内options属性简介 value&#xff1a;滑动条当前进度值。 min&#xff1a;设置滑动条设置最小值。 max&#xff1a;设置滑动条设置最大值&#xff0c;默认为 100 。 step&#xff1a;设置滑动条滑动跳动…

Python从进阶到高级—通俗易懂版

Python从进阶到高级—通俗易懂版 # # Author : Mikigo # Time : 2021/12/23 # 一、简介 Python 进阶是我一直很想写的&#xff0c;作为自己学习的记录&#xff0c;过去自己在看一些代码的时候经常会困惑&#xff0c;看不懂&#xff0c;然后自己去查资料、看书籍&#xff0…

JAVA之HashMap详解

HashMap 1. 设计原理 HashMap 基于哈希表的 Map 接口实现&#xff0c;是以 key-value 存储形式存在&#xff0c;即主要用来存放键值对。HashMap 的实现不是同步的&#xff0c;这意味着它不是线程安全的。它的 key、value 都可以为 null&#xff0c;此外&#xff0c;HashMap 中…

appium实现自动化测试原理

目录 1、Appium原理 1.1、Android Appium原理图文解析 1.1.2、原理详解 1.1.2.1、脚本端 1.1.2.2、appium-server 1.1.2.3、中间件bootstrap.jar 1.1.2.4、驱动引擎uiautomator 1.2、 IOS Appium原理 1、Appium原理 1.1、Android Appium原理图文解析 执行测试脚本全过…

C#,二进制数的按位交换(Bits swap)的算法与源代码

数字在指定位置指定位数的交换是常见算法。 1 源程序 using System; using System.Text; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer.Algorithm { public static partial class Algorithm_Gallery { /// <…

专业140+总分420+南京信息工程大学811信号与系统考研经验南信大电子信息与通信工程,真题,大纲,参考书

今年顺利被南信大电子信息录取&#xff0c;初试420&#xff0c;专业811信号与系统140&#xff08;Jenny老师辅导班上140很多&#xff0c;真是大佬云集&#xff09;&#xff0c;今年应该是南信大电子信息最卷的一年&#xff0c;复试线比往年提高了很多&#xff0c;录取平均分380…

扭蛋机小程序开发:发展优势

商场中精美的扭蛋机一直都是年轻人的心头好&#xff0c;目前&#xff0c;扭蛋机商品也不在局限于各种小型玩具&#xff0c;也逐渐与各类热门IP合作&#xff0c;打造出了各类手办、周边等&#xff0c;深受各个年龄层的喜爱。 如今&#xff0c;扭蛋机在互联网的推动下&#xff0…

算法的基本概念

设么是算法&#xff1f; 什么是好的算法/ 什么是算法&#xff1a; 量水的问题&#xff1a; 方案如下&#xff1a;&#xff08;核心思路就是两个桶差值为2&#xff0c;两次差值为4&#xff0c;7-(5-4) 6&#xff09; 算法&#xff1a;准确描述的 “操作步骤 (问题求解步骤)”&…

数据结构中图的概念以及遍历算法的实现

在数据结构中&#xff0c;图&#xff08;Graph&#xff09;是由节点&#xff08;Vertex&#xff09;和连接节点的边&#xff08;Edge&#xff09;组成的一种非线性数据结构。图可以用来表示各种实际问题中的关系和连接&#xff0c;如社交网络、道路网络、电路等。 图由两个主要…

2023年全球架构师峰会(ArchSummit北京站2023):核心内容与学习收获(附大会核心PPT下载)

本次峰会是一场集结了全球顶级技术专家和行业领袖的盛会。作为一年一度的重要技术交流活动&#xff0c;本次峰会聚焦当前及未来软件架构的发展趋势、技术挑战与创新实践&#xff0c;旨在为参会者提供一个深度交流、学习与合作的平台。在为期两天的会议中&#xff0c;与会者不仅…

SQL Developer 小贴士:Unshared Worksheet

在Oracle SQL Developer中&#xff0c;最常用的功能应该是SQL Worksheet&#xff0c;或Worksheet。 可以创建两类Worksheet&#xff0c;即Worksheet和Unshared Worksheets。前者是共享数据库连接的&#xff0c;后者会单独创建自己的连接。前者的快捷键是AltF10&#xff1b;后者…

ACK One:构建混合云同城容灾系统

作者&#xff1a;蔡靖 对于当前业务运行在 IDC 内的 Kubernetes 集群中&#xff0c;希望通过云计算为云下业务提供同城灾备的高可用冗余能力&#xff0c;可利用阿里云分布式云容器平台 ACK One [ 1] 来提供统一得流量、应用和集群管理&#xff0c;实现业务流量的多集群路由和灾…

学习Android的第十六天

目录 Android 自定义 Adapter Adapter 接口 SpinnerAdapter ListAdapter BaseAdapter 自定义 BaseAdapter 参考文档 Android ListView 列表控件 ListView 的属性和方法 表头表尾分割线的设置 列表从底部开始显示 android:stackFromBottom 设置点击颜色 cacheColorH…

【Linux】28、命令行参数 语法格式

文章目录 一、没有括号二、[]三、{}四、<>五、...六、|七、() 命令行参数很复杂&#xff0c;通过 --help 会看到很多符号&#xff0c;比如 [] {} () <> | …&#xff0c;他们都是什么意思呢&#xff1f;一般格式如下&#xff1a; 命令<必选参数1|必选参数2>…

【自然语言处理】:实验4布置,预训练语言模型实现与应用

清华大学驭风计划 因为篇幅原因实验答案分开上传&#xff0c;自然语言处理专栏持续更新中&#xff0c;期待的小伙伴敬请关注 有任何疑问或者问题&#xff0c;也欢迎私信博主&#xff0c;大家可以相互讨论交流哟~~ 案例简介 2018年&#xff0c;Google提出了预训练语言模型BE…

基于PSO优化的GRU多输入时序回归预测(Matlab)粒子群优化门控循环单元神经网络时序回归预测

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分程序&#xff1a; 四、完整代码数据分享下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平台…

扩展语音识别系统:增强功能与多语言支持

一、引言 在之前的博客中&#xff0c;我们成功构建了一个基于LibriSpeech数据集的英文语音识别系统。现在&#xff0c;我们将对系统进行扩展&#xff0c;增加一些增强功能&#xff0c;并尝试支持多语言识别。 二、增加增强功能 语音合成 --除了语音识别&#xff0c;我们还可以…

文物保护系统守护历史岁月,成都青铜展科技闪耀

一、“吉金万里-中国西南青铜文明展”隆重开幕 1月27日&#xff0c;“吉金万里-中国西南青铜文明展”在成都金沙遗址博物馆向公众开放&#xff0c;奉上一场精彩的青铜文明“盛宴”。本次展览汇集了中国西南地区32家文博单位&#xff0c;以青铜器为代表的294件经典文物&#xf…

OBD部署OceanBase集群-配置文件方式

前一篇文章介绍了OBD白屏可视化方式部署OceanBase集群 &#xff0c;其原理是把可视化设置生成为一个配置文件&#xff0c;然后使用OBD命令部署集群 本篇想使用命令行加配置文件方式&#xff0c;只部署OceanBase和ODProxy两个组件 服务器参数配置和 oceanbase-all-in-one-*.ta…

LeetCode 0589.N 叉树的前序遍历:深度优先搜索(DFS)

【LetMeFly】589.N 叉树的前序遍历&#xff1a;深度优先搜索(DFS) 力扣题目链接&#xff1a;https://leetcode.cn/problems/n-ary-tree-preorder-traversal/ 给定一个 n 叉树的根节点 root &#xff0c;返回 其节点值的 前序遍历 。 n 叉树 在输入中按层序遍历进行序列化表…