小程序09-更改小程序渲染模式&新建小程序页面

已于 2024-11-16 01:57:06 修改
阅读量2.2k 收藏 6
点赞数 11
分类专栏： 微信小程序 文章标签： 小程序 前端 微信小程序
于 2024-04-28 22:59:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eiei47/article/details/138293248
版权
本文介绍了微信小程序中Skyline渲染模式的不成熟性以及推荐使用的WebView渲染模式。详细讲解了如何通过删除app.json中的特定配置项来切换到WebView渲染模式，同时提供了两种创建新页面的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

渲染模式

Skyline渲染模式：最新的渲染模式，还不是很成熟

WebView渲染模式：稳定版本，推荐选择

切换WebView渲染模式的方法：

选择 app.json 文件 -> 删除renderer、rendererOptions、component Framework三个配置项保存刷新一下，渲染模式就切换到了WebView 

文件介绍 - 回顾

新建小程序页面

第一种方式：

1. 右击pages文件夹 -> 选择新建文件夹

最低0.47元/天 解锁文章
《web开发： （微信小程序）页面渲染和事件》
yexiangCSDN的专栏
02-02 806
一、页面渲染 1. 条件渲染 1. wx:if 在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块： <view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块： <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length &g...
微信小程序-页面开发
陆卿之的博客
01-02 3850
页面开发
微信小程序初学指南
2301_79369181的博客
05-05 728
注意：1.小程序目前有两种渲染模式：（1）skyline渲染模式：新的，一般不用（2）webview渲染模式：要切换为webview渲染模式：｛在APP.json中去掉renderer、renderOptions、componentFramework还有skyline｝1.三个app开头的为项目的主体文件（app.js、app.json、app.wxss）2.pages：里面存放小程序的页面，现在里面有一个index页面，一个页面是由4个文件构成的，而且名字也是这个页面的名字开头。
微信小程序 WebView 模式和 Skyline 渲染模式的区别
最新发布
轻风细雨_林木木
04-13 519
项目WebView 渲染模式Skyline 渲染模式渲染内核WebView（网页）原生自研渲染引擎（类 Flutter）页面流畅度一般（低端机可能卡）高流畅度，丝滑体验启动速度相对慢更快内存占用较高更低动画/滚动体验可能掉帧基本 60fps调试体验工具成熟正在完善中最低基础库要求无特别要求>= 2.29.2适用场景通用兼容追求高性能/大厂级体验的项目。
微信小程序自定义组件重渲染
wskgxz的博客
12-30 2824
微信小程序自定义组件重渲染，一些可能方法的分析，以及相对合适的解决方案。
【微信小程序实现tab栏切换渲染当前点击的数据】
CSDNwangjinwei的博客
07-21 655
1.通过获取当前点击的下标值将获取到的值传给要渲染的数据 2.当前点击的内容如果与获取到的数据值的相同则渲染该数据 3.要获取当前点击的下标值，第一次默认渲染第一个数据
微信小程序之旅一（页面渲染）
diyanchi2925的博客
07-01 259
1、微信小程序条件渲染（wx:if）：使用wx:if={{Boolean}}来判断是否需要渲染该代码块，使用wx:elif和wx:eise来渲染else块 <view wx:if="{{isShow}}" class='item'>{{title}} </view> 2、微信小程序多组件条件渲染（block wx:if）：使用<block...
关于微信小程序的页面渲染
weixin_52582672的博客
04-11 433
虽然问题很小，但困扰了挺久的。。。 <view class="container"> <image class="vol-picture" src="{{item[0].imageUrl}}" mode="aspectFill"></image> <text class="vol-font">{{item[0].detail}}</text> </view> data: { item:[], id:
小北微信小程序之--新建和编辑相册（小程序的表单提交）
03-29
本文将介绍小北微信小程序中的相册新建和编辑功能，着重讲述表单提交的方法及流程。微信小程序作为一种轻量级的应用平台，为用户提供便捷的服务，其中相册功能是用户经常会用到的一个功能，能够帮助用户存储和管理...
【xr-frame】微信小程序xr-frame典型案例
SpringWaterLikeMe
08-18 3146
在之前的工作中，我大量使用XR-Frame框架进行AR开发，并积累了一些案例和业务代码。其中包括2D图像识别、手部动作识别、Gltf模型加载、动态模型加载、模型动画等内容。小程序部分使用TypeScript编写，而XR-Frame组件部分则使用JavaScript编写。如果您正在学习XR-Frame，这些案例可能对您有参考价值。有些写的不对的地方欢迎批评指正。
高级Java人才培训专家-000-小程序 - 基础加强
03-09
### 高级Java人才培训专家-000-小程序 - 基础加强 #### 自定义组件 在小程序开发中，自定义组件是一项非常重要的功能，它能够帮助开发者更好地组织和复用代码，提高开发效率。 ##### 组件的创建与引用 1. **创建...
微信小程序页面渲染实现方法
10-16
主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序遇到修改数据后页面不渲染的问题解决
08-31
主要介绍了微信小程序遇到修改数据后页面不渲染的问题解决的相关资料,需要的朋友可以参考下
微信小程序如何刷新当前界面的实现方法
12-08
在微信小程序开发的过程中，在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来，但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作。下面介绍一下微信小程序刷新当前界面的几种方法。 方法一：this.onLoad() 使用方法：在操作函数中调用this.onLoad()或that.onLoad()（有时候this的作用域不够的时候需要定义that = this）。 适用场景：本次操作对页面onLoad函数所携带的各种参数没有影响。这时候我们在页面第一次执行onLoad函数的时候可以定义一个变量_options将onLoad函数的参数opti
微信小程序如何实现全局重新加载
10-16
主要给大家介绍了关于微信小程序如何实现全局重新加载的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序中页面显示时触发子组件的重新渲染
温暖前端的博客
05-23 1511
生命周期函数中，调用子组件的方法或者改变子组件的数据，从而触发子组件的重新渲染。触发子组件中的这个事件，子组件监听到事件后进行相应的处理，从而实现重新渲染。监听数据变化，当页面显示时，通过改变子组件的数据来触发。如果子组件的数据依赖于父组件的数据，可以在父组件的。改变父组件的数据，从而间接触发子组件的重新渲染。在子组件中定义一个事件，当页面显示时，父组件通过。生命周期函数中，通过。，从而实现重新渲染。
微信小程序实现Echarts,并根据不同点击事件重新渲染
weixin_43224069的博客
05-11 1384
微信小程序实现Echarts,并根据不同点击事件重新渲染
小程序实现简单页面渲染
m0_71933813的博客
12-30 1384
pages 用来存放所有小程序的页面 utils 用来存放工具性质的模块 (例如: 格式化时间的自定义模块) app.js 小程序项目的入口文件 app.json 小程序项目的全局配置文件 app.wxss 小程序项目的全局样式文件 project.config.json 项目的配置文件 sitemap.json 用来配置小程序及其页面是否允许被微信索引 1.app.json用来对微信小程序进行全局配置，决定页面文件的路径（全局配置） 1）.pages存放项目的页面（哪个页面在最前面，哪个页面就是
微信小程序 --- 页面渲染
weixin_34409822的博客
03-01 227
page.wxml文件 <view>{{text}}</view> page.js 文件： //获取应用实例 const app = getApp() Page({ data: { text: "你好", }, }) 转载于:https://www.cnblogs.com/e0yu/p/8488271.html...
vscode新建小程序项目
03-30
### 如何在 VS Code 中创建微信小程序项目 虽然微信官方提供了专门的 **微信开发者工具** 来开发小程序，但许多开发者更倾向于使用功能强大的编辑器如 VS Code 进行代码编写。以下是关于如何通过 VS Code 创建并配置微信小程序项目的详细说明。 #### 1. 安装必要的扩展 为了更好地支持微信小程序开发，在 VS Code 中需要安装特定的插件来提升开发效率。推荐安装以下扩展： - WeChat Mini Program Support[^4] 这个插件可以帮助开发者实现语法高亮、自动补全等功能，并提供 `wx2my` 命令用于将 `.wxml`, `.wxss` 转换成其他框架兼容的格式。 #### 2. 初始化微信小程序项目 尽管可以在 VS Code 中写代码，初始化操作仍需依赖于微信开发者工具完成。 - 启动微信开发者工具，按照指引新建一个空白的小程序项目[^3]。 - 设置好 AppID 和本地路径后保存项目到指定位置。 #### 3. 配置 VS Code 工作区 当项目被成功建立之后，就可以切换至 VS Code 继续后续工作流了。 - 打开 VS Code ，利用 “文件 -> 打开文件夹” 功能定位之前由微信开发者工具生成的那个目录[^1]。 #### 4. 引入 Vant 或者其他 UI 库 (可选步骤) 如果希望加快界面构建速度，则可以考虑集成成熟的前端组件库例如 Vant Weapp 。具体做法如下所示: - 参考官方文档链接进入快速上手页面； - 在命令行工具里运行 npm init @vant/cli@latest my-project-name --template vanilla ; - 编辑根目录下的 app.json 添加自定义样式表字段 networkTimeout; - 更新 project.config.json 的 setting 字段加入 es6 支持声明； - 新增 package.json 文件描述模块版本信息等内容； - 利用 npx miniprogram-ci compile 对整个工程重新编译一次； #### 5. 测试环境搭建 最后一步就是验证当前设置是否正常运作。可以通过两种方法来进行模拟调试： - 方法A：继续沿用原有的微信开发者工具加载刚刚修改过的源码资源包； - 方法B：借助第三方服务端渲染引擎 Node.js 实现独立部署方案。 ```javascript // 示例代码片段展示如何调用微信 API 获取用户登录态 code 参数 const wx = require('weixin-js-sdk'); Page({ data:{ userInfo:{} }, onLoad:function(options){ wx.login({success(res){this.setData({userInfo:res})}}) } }) ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值