2020-03-10 15:49:03 weixin_39709920 阅读数 32
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28779 人正在学习 去看看 秦子恒

利用微信开发者工具获取小程序指定页面路径!

文章来源:企鹅号 - 程鹏亮

小程序不同于app,小程序的每个页面都有页面路径。在使用微信小程序的过程中,很多场景都要使用到小程序的页面路径。比如微信图文中的小程序,公众号菜单中的小程序,小程序的互相跳转等等各种应用场景,今天教大家如何使用微信开发者工具获得小程序指定页面的路径。

 

 

首先你得先下载安装微信开发着工具,并且获得小程序前端代码包,像一些扫码上传的平台,你是拿不到代码包的。这些获取路径就比较麻烦。

安装好小程序开发者工具,以开发者的身份登陆工具,新建小程序项目,导入前端代码包,就可以看到下面的页面了

 

打开开发者工具,在底端可以看到页面路径和页面参数。小程序的完整路径是由小程序的页面路径和页面参数组成的。比如上面这个小程序

页面路径pages/bigcms/article/article

完整路径pages/bigcms/article/article?id=24332&typeid=3

页面路径和页面参数中间使用?连接。这个路径可以使用到很多场景,比如

2018-07-18 14:24:52 en_joker 阅读数 3527
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28779 人正在学习 去看看 秦子恒

    我们每次一个新页面时,都需要手动的新建一个目录+4个文件(即目录、js文件、wxml文件、wxss文件、json文件),这是相当麻烦的事儿。这里告诉大家一个一次创建4个页面文件的小技巧。
    如果app.json文件下pages数组里的页面路径,指向的是一个不存在的文件,点击保存后,那么MINA框架会自动创建这个页面的4个文件。
    通过这样的方式新建的页面文件将自动补全每个页面文件里必须的基本代码,不会出现错误。

2018-07-24 18:36:52 zmzsoftware 阅读数 877
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28779 人正在学习 去看看 秦子恒

快速上手安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。

 

你的第一个小游戏

新建项目选择小程序项目,选择代码存放的硬盘路径。 目前小游戏不提供公开注册,可点击体验小游戏使用无 AppID 模式。 给你的项目起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。

 

点击顶部菜单编译就可以在 IDE 预览你的第一个小游戏。

 


真机预览

点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小游戏的表现。点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小游戏。

 

 

文件结构

小游戏只有以下两个必要文件:

  • game.js 小游戏入口文件
  • game.json 配置文件


配置

小游戏开发者通过在根目录编写一个 game.json 文件进行配置,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置。

 

 

deviceOrientation

 


示例配置

[JavaScript] 纯文本查看 复制代码

?

1

2

3

4

5

6

7

8

9

{

    "deviceOrientation": "portrait",

    "networkTimeout": {

        "request": 5000,

        "connectSocket": 5000,

        "uploadFile": 5000,

        "downloadFile": 5000

    }

}

wx API

 

你只能使用 JavaScript 来编写小游戏。小游戏的运行环境是一个 绑定了一些方法的 JavaScript VM。不同于浏览器,这个运行环境没有 BOM 和 DOM API,只有 wx API。接下来我们将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。

 

创建 Canvas

调用 wx.createCanvas() 接口,可以创建一个 Canvas 对象。

[JavaScript] 纯文本查看 复制代码

?

1

var canvas = wx.createCanvas()

此时创建的 canvas 已经显示在了屏幕上,且与屏幕等宽等高。

[JavaScript] 纯文本查看 复制代码

?

1

console.log(canvas.width, canvas.height)

但是由于没有在 canvas 上进行绘制,所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个 100x100 的红色矩形。

[JavaScript] 纯文本查看 复制代码

?

1

2

3

var context = canvas.getContext('2d')

context.fillStyle = 'red'

context.fillRect(0, 0, 100, 100)

通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext,调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法,详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。

通过设置 width 和 height 属性可以改变 Canvas 对象的宽高,但这也会导致 Canvas 内容的清空和渲染上下文的重置。

[JavaScript] 纯文本查看 复制代码

?

1

2

canvas.width = 300

canvas.height = 300

 

显示图片

通过 wx.createImage() 接口,可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时,图片才会显示在屏幕上。

[JavaScript] 纯文本查看 复制代码

?

1

var image = wx.createImage()

设置 Image 对象的 src 属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的 onload 回调函数,此时可以将 Image 对象绘制到 Canvas 上。

[JavaScript] 纯文本查看 复制代码

?

1

2

3

4

5

image.onload = function () {

    console.log(image.width, image.height)

    context.drawImage(image, 0, 0)

}

image.src = 'logo.png'

 

创建多个 Canvas

在整个小游戏运行期间,首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上,并不会显示在屏幕上。

以如下代码为例,运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。

[JavaScript] 纯文本查看 复制代码

?

1

2

3

4

5

var screenCanvas = wx.createCanvas()

var offScreenCanvas = wx.createCanvas()

var offContext = offScreenCanvas.getContext('2d')

offContext.fillStyle = 'red'

offContext.fillRect(0, 0, 100, 100)

为了让这个红色矩形显示在屏幕上,我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。

[JavaScript] 纯文本查看 复制代码

?

1

2

var screenContext = screenCanvas.getContext('2d')

screenContext.drawImage(offScreenCanvas, 0, 0)

 

动画

在 JavaScript 中,一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持:

另外,还可以通过 wx.setPreferredFramesPerSecond() 修改执行 requestAnimationFrame 回调函数的频率,以降低性能消耗。


触摸事件

响应用户与屏幕的交互是游戏中必不可少的部分,小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API:

[JavaScript] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

wx.onTouchStart(function (e) {

    console.log(e.touches)

})

 

wx.onTouchMove(function (e) {

    console.log(e.touches)

})

 

wx.onTouchEnd(function (e) {

    console.log(e.touches)

})

 

wx.onTouchCancel(function (e) {

    console.log(e.touches)

微信小游戏交流群1:556388934

微信小游戏交流群2:556390305

 

2020-03-04 18:27:25 yanghongyan001 阅读数 34
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28779 人正在学习 去看看 秦子恒

1.uniapp目录结构

在这里插入图片描述
uni.scss 直接在里面编辑全局样式,且无需在每个分页面中引入,只需在style里添加 lang="scss"即可

2.tabBar

1.作用(设置页面切换的底部导航栏

如果应用是一个多 tab应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时
显示的对应页。

2.属性
在这里插入图片描述
在这里插入图片描述
3.list中的属性
在这里插入图片描述

3.设置进入小程序的默认显示页面

只需要将pages.json里的位置颠倒一下即可
在这里插入图片描述

4.调整底部导航栏位置顺序

颠倒tabBar里list的顺序即可
在这里插入图片描述

5.uniapp项目实现切换页面

(1)进入uniapp官网,点击左侧列表的tabBar
在这里插入图片描述
(2)复制列表右侧的tabBar代码粘贴到pages.json

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        //"iconPath": "static/image/icon_component.png",
        //"selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        //"iconPath": "static/image/icon_API.png",
        //"selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

将pagePath换成项目的路径(复制pages里path的路径),text换成标题(复制pages里"navigationBarTitleText"的值)
注:每新建一个页面,pages.json里就会自动添加path,然后手动在style里添加"navigationBarTitleText"

6.uniapp项目配置好页面切换后在微信小程序中打开

(1)运行—运行到小程序模拟器—运行设置
(2)复制微信发开发者路径在这里插入图片描述
(3)进入微信开发者工具
在这里插入图片描述
在这里插入图片描述
(4)运行—运行到小程序模拟器—微信开发者工具(开启第一项)
此时微信开发者工具里就有了uniapp项目
在这里插入图片描述
uniapp项目中就有了一个微信小程序的包
在这里插入图片描述
注:template标签内要有一个最大的view盒子

7.get/post请求

(1)get请求

<h1 @click="requestData">发起网络POST请求</h1>
methods:{
			requestData(){
				uni.request({
				    url: 'http://api.komavideo.com/news/list',
				    method:'GET',
					data: {
				        
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			}
		}

(2)post请求

<h1 @click="requestData">发起网络POST请求</h1>
methods:{
			requestData(){
				uni.request({
				    url: 'http://api.komavideo.com/news/list',
				    method:'POST',
					data: {
				        pageSize:2
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			}
		}

nz-微信小程序

阅读数 41

微信小程序开发

阅读数 91

没有更多推荐了,返回首页