微信小程序开发
微信小程序开发
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
webpack打包微信小程序
webpack打包微信小程序目的:编写小程序代码时也可以引入 npm 上的插件, 通过 webpack 打包后可以大大减小小程序代码的体积项目目录:.项目目录|- plugin |- loadpath.js|- src // 把小程序的代码放到 src 文件夹内 |- cloudfunctions // 创建云开发的目录 |- miniprogram // 开发者工具创建小程序时存放小程序初始代码的目录|- webpa原创 2021-07-26 18:16:05 · 2531 阅读 · 0 评论 -
微信小游戏开发 three.js 与 cocos creator 区别:
three.js 更适合用来做3D模型效果!cocos creator 更适合用来做2D动画效果!原创 2020-01-16 10:12:14 · 2739 阅读 · 0 评论 -
小程序报错:Unexpected end of JSON input
报错原因:跳转页面传参内包含英文“ ? ”let data = { aaa: '你学会了吗?' //由于参数内携带英文? 所以报错}wx.navigateTo({ url: "/home/home?data="+ encodeURI(JSON.stringify(data)) })解决方法:先通过 wx.setStorageSync(‘data’,data) 缓存...原创 2019-12-25 17:03:03 · 872 阅读 · 0 评论 -
第10课 微信小程序数据存储(同步缓存、异步缓存,本地读取缓存):
第10课 微信小程序数据存储(同、异步缓存,本地读取缓存):同步缓存:wx.setStorageSync(key, value)异步缓存:wx.setStorage(Object object)同步删除缓存:wx.removeStorageSync(key)异步删除缓存:wx.removeStorage(Object object)同步获取缓存: wx.getStorageSync(...原创 2019-05-12 08:27:39 · 4124 阅读 · 0 评论 -
第11课 微信小程序多种弹窗提示样式
第11课 微信小程序弹窗提示样式:消息提示:wx.showToast(Object object)关闭消息提示: wx.hideToast(Object object)弹窗选框提示:wx.showModal(Object object)加载提示:wx.showLoading(Object object)关闭加载提示:wx.hideLoading(Object obje...原创 2019-05-12 08:51:11 · 4838 阅读 · 0 评论 -
第12课 微信小程序Component构造器自定义组件:
第12课 微信小程序Component构造器自定义定义组件:1.自定义创建组件:2.在组件的my-component.json文件声明组件my-component.json全部代码:{ "component": true,}3.设置组件的my-component.js代码:my-component.js全部代码:Component({ externalClass...原创 2019-05-12 22:46:10 · 773 阅读 · 0 评论 -
第13课 微信小程序组件间通信与事件:
第13课 微信小程序组件间通信与事件:通过接收组件内的点击事件触发外部页面内的点击事件实现组件内的通信:自定义创建组件的目录结构:触发事件:自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项:my-component.js全部代码如下Component({ externalClasses: ['user-class']...原创 2019-05-13 15:27:02 · 686 阅读 · 0 评论 -
第18课 微信小程序app.js全局属性与公共方法的使用
第18课 微信小程序app.js全局属性与公共方法的使用通过小程序的背景api播放器案例演示由于背景音乐播放器全局只能有一个所以只能在全局设置这一个并调用一个1、app.js内获取背景音乐api并设置成属性2、在utils内设置公共方法player,导出构造函数,在构造函数内添加方法3、在主件内引入公共方法player,并实例化方法内的构造函数,通过getApp()获取全局app...原创 2019-05-28 16:57:07 · 3329 阅读 · 0 评论 -
第19课 微信小程序安装使用mpvue脚手架
第19课 微信小程序安装使用mpvue脚手架:详情地址:http://mpvue.com/mpvue/quickstart/安装前检查环境:安装脚手架之前需要电脑已安装node与npm首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口或者 win + R 键 输入cmd 进入命令行窗口输入 :node -v 与 npm -v 查看有无安装node与n...原创 2019-06-03 15:40:58 · 494 阅读 · 0 评论 -
第20课 微信小程序实现相机拍照功能
第20课 微信小程序实现相机拍照功能效果图如下:camera标签自动打开摄像头camera标签详情: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html首先wxml代码:<view> <text>相机拍照功能</text> <button clas...原创 2019-06-04 16:34:37 · 19083 阅读 · 4 评论 -
第21课 微信小程序视频标签显示弹幕
第21课 微信小程序视频标签显示弹幕效果图如下:wxml代码如下:<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400...原创 2019-06-04 16:57:31 · 1226 阅读 · 0 评论 -
微信小程序报错 Error: errCode: -1 | 解决方法
如果你是因为请求云数据库内的数据 那就是权限问题解决方法如下:勾选 所有用户可读,仅创建者可读写如果你需要让所有用户都可读写那要怎么办呢!答案是创建云函数,调用云函数写入数据库,因为云函数就是创建者权限!...原创 2019-07-04 19:35:08 · 27924 阅读 · 0 评论 -
第9课 微信小程序页面跳转传递数据wx.navigateTo:
第9课 微信小程序页面跳转传递数据wx.navigateTo:先看看效果图:方法一: 跳转页面不传数据方法二: 跳转页面传数据下面我们来看看两个页面的全部实现代码吧:index1.wxml全部代码如下:<!--pages/index1/index1.wxml--><text>这里是index1.wxml</text><!-- bin...原创 2019-05-11 23:01:44 · 1329 阅读 · 0 评论 -
第8课 微信小程序双向数据绑定this.setData:
第8课 微信小程序双向数据绑定:效果图上来吧:上面的输入框是input标签,输入的值与js代码中的data内的数据绑定下面的显示文字是获取data内绑定的那个数据的值微信没有v-mode这种方法哦,所以只能这样实现数据动态绑定实现双向数据绑定的代码如下:wxml全部代码如下:<!-- bindinput是监听输入时触发change方法的函数 {{属性名}}:这是引入js内...原创 2019-05-11 22:14:22 · 891 阅读 · 0 评论 -
第3课 微信开发者工具picker标签实现动态时间选择器与地区选择器:
微信小程序picker标签实现动态时间选择器与地区选择器:运行效果如下:wxml代码如下:<picker mode="date" bindchange="changeDate">{{date}}</picker><picker mode="region" bindchange="changeRegion">{{region}}</picker&g...原创 2019-04-27 21:10:12 · 1359 阅读 · 0 评论 -
第1课 微信开发者工具注册与安装
零基础学习微信小程序开发:第1课 微信小程序的注册 安装:1、使用浏览器进入微信公众平台https://mp.weixin.qq.com进入 https://mp.weixin.qq.com注册:123456微信web开发工具 下载 安装:1234下载好后安装 安装完成后点击进去通过微信扫描登入:1234## 如何查看AppID:在登入微信公众平...原创 2019-04-20 13:32:47 · 1148 阅读 · 0 评论 -
第4课 微信小程序app.json目录结构解析:
第4课 微信小程序app.json目录结构解析:app.json全局配置文件内容详解://json里面不能写注释不然会报错,运行时需把注释删除{ "pages": [ //页面路径都需要写入pages中 "pages/logs/logs", "pages/index1/index1", "pages/index2/index2", "pages/ind...原创 2019-05-06 15:53:12 · 951 阅读 · 0 评论 -
第5课 微信小程序常用尺寸单位rpx说明:
第5课 微信小程序尺寸单位rpx说明:rpx单位:width: 750rpx; //定义所有手机屏幕宽度都为750rpxpx单位:height: 750px; //px单位最好只用于高度,如果定义宽度 手机屏幕不同显示效果也会不同vw单位:width: 100vw; //定义所有屏幕宽度都为100vwvh单位:height: 100vh; //定义所有屏幕高度...原创 2019-05-06 16:18:55 · 2518 阅读 · 0 评论 -
第6课 微信小程序模板的引入与使用:
第6课 微信小程序模板的引入与使用:在template1.wxml中自定义一个wxml模板:<template>定义模板标签</template>在template1.wxss中为模板设置wxss样式:在index1.wxml页面内引入模板:<!-- wxml内引入自定义的模板 路径 --><import src="../templat...原创 2019-05-06 18:01:22 · 455 阅读 · 1 评论 -
第14课 微信小程序observers属性监听器:
第14课 微信小程序observers属性监听器:observers数据监听器可以用于监听和响应任何属性和数据字段的变化组件内使用observers数据监听器:Component({ properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 }, data: { // 这里是一些组件内部数据 //content: '...原创 2019-05-14 11:37:49 · 14557 阅读 · 5 评论 -
第15课 微信小程序behavior组件间的数据共享:
第15课 微信小程序behavior组件间的数据共享:先看看目录结构:我们先编写一下两my-behavior的代码:这里是my-behavior.js的代码://behavior内还可以嵌套引入behavior// my-behavior.js//引入behaviors2就相当于把behaviors2里面的方法与数据都加到这里面var myBehavior2 = require(...原创 2019-05-14 11:58:23 · 4078 阅读 · 1 评论 -
第7课 微信小程序实现图片搜索器案例:
第7课 微信小程序实现图片搜索器案例:效果图如下:来我们来看看代码的全局样式:首先在app.json内的pages把需要的index1、index2页面注册之后我们只需写index1、index2两个页面 即可实现图片搜索小案例首先我们来看以下index1页面内的代码:index1.js代码:// pages/index1/index1.jsPage({ data: ...原创 2019-05-08 08:09:50 · 3512 阅读 · 4 评论 -
第16课 微信小程序组件详细安装导入方法:
第16课 微信小程序组件详细安装导入方法:npm init -y //初始化环境npm install --save miniprogram-slide-view //安装组件(这里已此组件为例)详情→勾选使用npm模块工具→构建npm在需要使用组件的页面的json文件内引入组件1.首先我们初始化环境并安装组件:在微信开发者工具→左击鼠标→点击磁盘打开→在当前项目目录进入cmd命...原创 2019-05-16 08:39:56 · 1994 阅读 · 0 评论 -
微信开发者工具模拟器input点击偏移问题解决方法:
微信开发者工具模拟器input点击偏移问题解决方法:原因:由于win10系统显示设置了 缩放布局125% 将其改成100%即可1.在桌面右击鼠标:点击显示设置2.更改显示缩放布局:不用谢我,因为事后你会改回来的!好了拜~...原创 2019-05-11 17:59:40 · 1316 阅读 · 0 评论 -
第17课 微信小程序通过node获取用户openid:
第17课 微信小程序通过node获取用户openid:调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。调用 auth.code2Session 接口,换取用户唯一标识 OpenID 和 会话密钥 session_key。流程图如下:https://developers.weixin.qq.com/miniprogram/dev/framework/o...原创 2019-05-21 16:05:27 · 1628 阅读 · 5 评论 -
第2课 微信开发者工具使用slider进度条标签编写rgb颜色选择功能:
微信小程序编写rgb颜色选择功能:效果图如下:以下是wxml文件代码:<view class='box' style="background-color:rgb({{r}},{{g}},{{b}});width:100px;height:100px"></view><!-- slider滑动条标签 data-color="r"设置属性color:'r' 这样...原创 2019-04-27 20:55:02 · 3254 阅读 · 3 评论