2020-02-25 21:56:23 qq_44973159 阅读数 104
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

在我们下载微信开发者工具后,打开工具,第一次需要扫码登录,登录后,如下图,选择新建一个小程序
在这里插入图片描述
我的这个是新建了一个的了,点击加号新建,然后填入信息,项目名称,项目存储的地址,以及注册小程序时的APPID,再选择不使用云服务,语言选择默认的JavaScript
在这里插入图片描述
看一下创建好了的小程序的所有文件夹下面的文件是什么。如下图:
在这里插入图片描述


文件都看过了,接下来就是文件下面的内容了,首先是app.json 全局入口文件 下面是直接生成的代码。
app.json是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的app.json配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"       
    //该项目的俩个字段表示里面有俩个页面,分别是首页和日志文件,可以在此字段当中添加其目录或者文件。
  ],
  "window": {
    "backgroundTextStyle": "light",   			// 下拉
    "navigationBarBackgroundColor": "#fff",  	//导航栏的背景颜色
    "navigationBarTitleText": "WeChat",  		//导航栏的标题
    "navigationBarTextStyle": "black"  			//文字颜色,只能定义为黑色和白色 black white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1.pages pages 字段⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
2.window window 字段定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等
window的属性挺多的,在该页面浏览:单击跳转
3 tabber属性:定义导航栏属性,页面路径,文字等等,以及color颜色,selectedColor选中后的字体颜色,属性详情:单击跳转

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    }
    ],
    "color":"#0099ff",
    "selectedColor": "#000000"
  },

在通过使用tabber属性添加导航后,我们可以看到在添加后与很多小程序多差不多了,在下方有一个图片加文字的导航。如下图所示:
在这里插入图片描述


其次就是页面配置文件 page.json
在其他的.json文件当中,比如在index.json页面当中,在原本的基础上加上属性会对页面外观进行部分改变,代码如下:
除去原有的第一行,给主页面加上了背景色和文字的属性。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0099aa",
  "navigationBarTitleText": "主页"
}

微信索引配置文件 sitemap.json
在该文件下会给出一个网址,该网址会直接指向微信官方的文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html


2016-12-07 19:22:11 weixin_36185028 阅读数 11583
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

从9月份微信小程序横空出世到现在的将近三个月,虽然尚未全面开放,却已红透大半边天,网友们贡献的各种资源教程也喷涌而出。

最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,存放各个页面的文件夹默认为pages,但是想把它改成其他名字,结果会出现不同的问题,下面分享自己是如何爬这个坑的,懂得的大神请忽略。

首先,现在下来最新的开发工具微信web开发者工具v0.11.112301,打开新建一个快速启动项目test,稍微改一下页面内容,只保留logs页面,效果和文件树如下所示:


由于某种原因,现在我需要更改pages文件夹名称,当然app.json里面对应的页面路径也要同步更改。

1,先更改文件树文件夹名称为pagestest,移开鼠标焦点点击空白处(此处若不移开鼠标焦点直接保存结果不会改变),保存(会出现报错一次),再更改app.json中的页面路径为"pagestest/logs/logs" 保存,显示效果正常为;

2,先更改app.json中的页面路径为"pagestest /logs/logs" 保存,页面显示pagestest/logs/logs.wxml,再更改文件树种的文件夹名称为pagestest保存,此时pagestest文件夹中又出现了另外一个文件夹pages,而且显示仍然是pagestest/logs/logs.wxml,而这个pages文件夹中也有一个logs文件夹,与原文件夹内容一样。

删除这个后来生成的pages文件夹,保存,此时的页面才显示出Hello World。有时删除pages后还不能正常显示,需要进入logs的wxml页面置入鼠标焦点,无需改变内容,保存一下即可。

另外,自己在尝试时也遇到过其他的情况:

1.生成的多余的页面文件夹也可能在于app.js同一层的位置;

2.更改后页面内容还是不能正常显示,这时进入wxml文件看一下内容,发现原本的文件内容变成了路径,所以删除文件后来生成的文件之前先看一下页面内容是否还存在。

 

综上所述,微信官方的开发者工具在用户体验上还是存在这个欠缺的,期待官方后面版本的更加人性化,

对于出现诸如以上问题,除了按方法1更改之外,当然一次性建好页面文件夹名称不再更改是最好的办法,如何无法确定后面是否需要更改,则可以用第三方编辑器比如sublime text进行代码变,可以在官方开发工具中查看效果,从而避免出现以上问题。

2018-07-24 10:16:10 Joychen404 阅读数 627
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

使用微信小程序将文件(或图片)保存在本地,这样可以快速的取到图片,节约用户的流量和时间。

保存图片,我认为有两处需要保存 

1、选择图片的时候,使用wx.chooseImage选择图片的时候保存 

2、下载图片的时候,使用wx.downloadFile下载图片的时候保存

width=600

代码片段 

1、选择图片的时候

js代码

frontimage:function(){

var_this=this;

//选择图片

wx.chooseImage({

count:1,// 默认9

sizeType:[\'original\',\'compressed\'],// 可以指定是原图还是压缩图,默认二者都有

sourceType:[\'album\',\'camera\'],// 可以指定来源是相册还是相机,默认二者都有

success:function(res){

// 成功,把url赋值至wxml展示图片

_this.setData({

FilePaths:res.tempFilePaths

})

// 保存图片

wx.saveFile({

//之前被这个地址坑了好几次

tempFilePath:res.tempFilePaths,//这个地址是图片地址,而不是你保存的目的地址

success:function(res){

console.log(保存图片成功)

},

fail:function(res){

console.log(保存图片失败)

console.log(res)

}

})

}

})

}

2、下载图片的时候

wx.downloadFile({
              url: res.data.body[0].URL,  //图片的下载地址
              success: function (res) { //图片下载成功
                wx.saveFile({
                  tempFilePath: res.tempFilePath, //下载后的图片临时地址
                  success: function (res) {
                    console.log(保存图片成功)
                  },
                  fail: function () {
                    console.log(保存图片失败)
                  }
                })
              }, fail: function (res) {
                console.log(图片下载失败)
              }
            })

图片保存成功后,在保存成功的地方将返回的res.savedFilePath(这是成功保存后的保存路径)放入缓存中,在需要用图片的时候根据缓存存的url就可以取到图片了。

 

推荐阅读: 微信小程序开发教程   微信小程序

2016-07-31 10:17:35 u012868077 阅读数 4386
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信开发需要将本地端口映射到公网,那么这里我们需要借助一款工具ngrok,有了它我们就可以实现公网映射了。
ngrok的下载地址: https://ngrok.com
下载之后,比如说将其放在D:/ngrok文件夹下,那么我们可以使用以下步骤来完成。
1、在命令行窗口中切换路径到D:/ngrok
这里写图片描述
2、命令行输入: ngrok http 8080 (因为我们需要将本地的8080端口tomcat服务器映射到公网)
这里写图片描述
这里写图片描述
上图中Forwarding中的内容,就表示我们映射成功了。赶快去试试吧。
参考网址: http://dorole.com/tag/ngrok/

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