08 | progress组件:如何自定义实现一个环形进度条?
09 | rich-text组件:如何单击预览rich-text中的图片并保存?
10 | view容器组件及Flex布局(一):学习容器组件view及其重要属性
11 | view容器组件及Flex布局(二):介绍flex布局中常用的样式及样式值
12 | 可移动容器及可移动区域(一):学习使用movable-view与movable-area组件
13 | 可移动容器及可移动区域(二):如何实现侧滑删除功能
14 | scroll-view介绍:在小程序中如何实现滚动锚定?
15 | scroll-view介绍:如果渲染一个滚动的长列表?
17 | 滚动选择器(二):使用两种方式自定义实现省、市、区三级联动的选择器
18 | 滑动选择器表单组件:如何基于wxs自定义一个竖向的slider?
20 | image媒体组件(上):如何实现图片的懒加载?
21 | image媒体组件(下):开发中经常遇到的问题?
22 | 如何实现直播间功能?(一):了解live-pusher、live-player组件的主要属性及使用限制
23 | 如何实现直播间功能?(二):如何开启、使用腾讯云的云直播功能
24 | 如何实现直播间功能?(三):安装与使用ffmepg,及使用ffmpeg进行推拉流验证
25 | 如何实现直播间功能?(四):使用live-pusher、live-player组件在小程序中实现直播功能
27 | 如何实现直播间功能?(六):live-pusher、live-player组件在开发中的常见问题
28 | web-view(一):了解session、cookie等相关基本概念
29 | web-view(二):了解常见的四种鉴权方式
30 | web-view(三):如何使用koa框架,及如何进行热加载?
31 | web-view(四):如何在服务器端实现cookie与sesson的生成?
32 | web-view(五):如何将session存储到服务器端,及如何实现token验证?
33 | web-view(六):基于koa中间件,实现微信一键登录的后端接口
34 | web-view(七):实现微信用户一键登录
35 | web-view(八):了解正确的微信登录姿势
36 | web-view(九):web-view组件在开发的常见问题讲解
37 | WebGL介绍(一):了解WebGL相关的基础概念
38 | WebGL介绍(二):如何在小程序中取到WebGL上下文环境对象
39 | WebGL介绍(三):了解WebGL的世界坐标系
40 | WebGL介绍(四):重新认识右手坐标系及如何编写顶点着色器代码
41 | WebGL介绍(五):学习片断着色器编写,了解变量修饰变型uniform与attribute
42 | WebGL介绍(六):了解在WebGL中裁剪空间是如何裁剪出来的
43 | WebGL介绍(七):了解着色器变量值的绑定及三种三角形绘制模式之间的差异
44 | WebGL介绍(八):在着色器中使用共享变量,绘制一个颜色渐变的正方形
46 | WebGL介绍(十):绘制一个旋转的立方体
47 | WebGL介绍(十一):在3D绘制中使用纹理材质
48 | WebGL介绍(十二):如何创建相机、场景及光源
49 | WebGL介绍(十三):创建加载器、渲染器与控制器,完成3D模型文件的加载与展示
精选留言(23)
作者回复: 👍
欢迎分享到部落里或写作平台。
作者回复: 👍
作者回复: npm的使用比较简单:
1,初始化目录是npm init
2,安装模块是npm install
3,记得在项目详情里勾选“使用npm”,以及每次在微信开发者工具里安装完npm模块后,记得执行一遍工具->构建npm(BTW:这个地方官方为什么还不搞成自动的,还要人为操作?)
记住以上3点就可以了。更详细的点可以参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
技术类课程有时候文本专栏好像更直白。
/pages/2.6_2.7/index.json里的代码如下:
{
"usingComponents": {
"slide-view": "miniprogram-slide-view",
"mp-slideview": "weui-miniprogram/slideview/slideview",
"mp-cell": "weui-miniprogram/cell/cell",
"wxml-to-canvas": "wxml-to-canvas"
}
}
而 "weui-miniprogram/slideview/slideview"等路径都在 /node_modules下,而不在 /components 目录下,程序是如何路由的?是否有相关配置文件来指定 ?
作者回复: 不。不要被components这个名称迷惑了,实际上这个目录叫什么名字都可以。
在*.json配置文件里面,引用组件时指定的路径有两种:
(一)从node_modules目录下开始的绝对路径,下面这个代码里都是这种路径:
// 第2章/miniprogram/pages/2.6_2.7/index.json
{
"usingComponents": {
"slide-view": "miniprogram-slide-view",
"mp-slideview": "weui-miniprogram/slideview/slideview",
"mp-cell": "weui-miniprogram/cell/cell",
"wxml-to-canvas": "wxml-to-canvas"
}
}
(二)另外一种就是从当前文件开始的相对路径,例如:
// 第2章/miniprogram/pages/2.4_2.5/index.json
{
"usingComponents": {
"share-box": "./components/shareBox/index"
}
}
这个路径就是从当前目录下的components子目录查找相关组件。
---
有一种情况比较特殊,就是我们在app.json用“useExtendedLib”配置的方式,启用weui组件库以后:
"useExtendedLib": {
"weui": true
}
这个库的文件并需要显式放在node_modules目录下(目录下面没有weui-miniprogram子目录),但我们仍然可以当作第一种情况使用。
作者回复: 这个有意思,有时间我也试一下~
作者回复: 是要实现录屏吗?
这个方法的第1个参数wxml是一个字符串,最笨的方法是,使用wxml代码结构和数据先拼出这个字符串,然后间隔调用。
页面上各渲染各的,可以说是两套代码。
聪明的办法我还没有想到。
https://gitee.com/geektime-geekbang/weapp-practice/tree/2.6-5.23
作者回复: 源码是分阶段的,仓库主分支是最新源码。使用中有问题欢迎留言。
作者回复: 加油
作者回复: 已经引用了weui这个组件库了吗
删除的是什么代码?
如果还有问题,你把代码链接发给我,我给你看一下~
作者回复: "需要在没用使用",没理解,是不是“每页使用”呢?
目前没有看到类似于Vue的全局组件注册,只能在每个页面注册组件~
作者回复: 是设备分辨率高吗?
如果还有问题,可以把代码片断发给我看下。
作者回复: 好的,学到了,谢谢~
作者回复: 用本地文件应该不受影响,具体的错误信息是什么?
如果还有问题,可以把你的代码片断链接发给我,我给你看看
祝天天进步
作者回复: 需要先安装node.js ,再安装npm。
作者回复: 是不是目录搞错了?执行npm init
如果还有问题,晚上8点到我的b 站直播间,账号:用故事讲技术,直播讲代码。
需要换一下本地基础库,我在 2.10.4 版本会出现这个问题,但是改到 2.11.1 就没有这个错误了。
作者回复: 有没有选择构建npm?
是不是是由别的问题引发的,有时候看到的错误不一定是真正的错误
如果编译出错了,模块也是编不进去的~
操作过程: 执行命令 `npm install --save wxml-to-canvas`,然后 微信小程序 > 菜单栏 > 工具 > 构建npm
执行命令 `npm install --save wxml-to-canvas`后在项目根目录下的 miniprogram/node_modules 目录下有 wxml-to-canvas 目录
工具 > 构建npm后 在 miniprogram_npm 目录下也有 wxml-to-canvas 目录。
但是编译就出现前面那个错误;页面 json 使用 usingComponents 导入 wxml-to-canvas ,整个页面就失效了。请问先是哪里的问题呢?
作者回复: 评论是不是不能删除重写啊?
在另一个问题回你喽
如果还有问题,你在我b站直播的时候,我给你看一看
mp-slideview 新增 ext-class="slideViewClass" 属性,
然后在 wxss 里新增
.slideViewClass .weui-cell{
padding: 0;
}
即可
作者回复: 👍欢迎你同时分享到其他地方部落圈子公众号微博等等~
```
["usingComponents"]["mp-slideview"] 未找到
```
可以试试升级开发者工具。而且 Mac 版微信开发者工具好像有 Bug,在低版本 1.02 上点击 “检查更新”,会提示 “已是最新版本”,实际最新版本已经是 1.03 了。
作者回复: 👍建议分享给更多人,让更多读者看到~
遇到奇怪的bug,都可以考虑先把工具升级一下。
毕竟每一次看官方更新,都解决了一吨bug ~
下载下来的源码也是这个样子
作者回复: 可以考虑升级一下开发者工具,另一个读者貌似遇到了与你一样的问题~