原生微信小程序开发记录

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;设置滑动条滑动跳动…

【npm】npm镜像源及命令

淘宝镜像源 npm config set registry https://registry.npm.taobao.org &#xff08;旧版&#xff0c;已到期&#xff09; 淘宝中国镜像源 npm config set registry https://registry.npmmirror.com &#xff08;新版&#xff09; 腾讯云镜像源 npm config set registry h…

Linux命令-bzmore命令(查看bzip2压缩过的文本文件的内容)

说明 bzmore命令 用于查看bzip2压缩过的文本文件的内容&#xff0c;当下一屏显示不下时可以实现分屏显示。 语法 bzmore(参数)参数 文件&#xff1a;指定要分屏显示的.bz2压缩包。

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 { /// <…

使用vite创建项目

NPM npm create vitelatest Yarn yarn create vite PNPM pnpm create vite Bun bunx create-vite 安装sass npm add -D sass 安装less npm add -D less vite官方中文文档&#xff1a;Vite | 下一代的前端工具链 (vitejs.dev)

Fabric V2.5 test-network启动日志分析

背景 分析Fabric网络的启动日志可以帮我们理解搭建区块链网络的过程。本文对输出日志进行详细的分析。 启动网络与创建通道 # verbose 可以输出更详细的日志。 ./network.sh up createChannel -verbose# 使用本机安装的docker and docker-compose Using docker and docker-c…

用实例详解Java中的类、对象、继承及多态性,一文理解Java类和对象、多态性的概念

Java中的类、对象、继承及多态性详解 Java作为一门面向对象的编程语言&#xff0c;其核心概念包括类、对象、继承以及多态性。这些概念是Java编程的基础&#xff0c;理解和掌握它们对于编写高效、可维护的Java代码至关重要。本文将结合实例详细讲解这些概念&#xff0c;并解释…

专业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;如社交网络、道路网络、电路等。 图由两个主要…

MFC写入文件中文乱码解决办法

&#x1f482; 个人主页:pp不会算法^ v ^ &#x1f91f; 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主 &#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 产生原因: visual studio的默认编码是Unicode&#xff0c;但是tx…

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>…