2017-11-09 22:31:41 menglixiangjian 阅读数 1199
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

关于微信公众号在现在来说是比较热的,本人第一次接触公众号开发想把学习到的与在开发过程中遇到的问题分享出来一起学习!

开发公众号前需要准备的工作如下:1、一台服务器 2、微信开发者手册 

准备好之后开始开发,首先把原本的傻瓜模式关闭!在开发模式下面基本配置启动开发者模式!

在启动过程中如果不配置服务器信息与验证是无法启动成功的!

接下来验证服务器:


开发公众号我是用thiankphp3.2.3来开发的,这个URL就是指向API这个控制器下面的index方法的!

Token是验证微信与你服务器之间的密钥来的需要在填写与控制器里面的token一样的

接下就去控制器下指向的方法写方法了(原理就是微信服务器那边会以GET方式发送几个参数到你那个方法那边验证,最后方法返回出去一个值到达一个验证)


当方法写好后再微信公众平台启动开发者模式这时候就可以启动了!(如果失败再提交2-4次,如果还是失败请检查代码!)

2018-04-15 12:22:49 not_so_bad 阅读数 119
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

打开小程序的微信开发者工具后,在编辑器界面的可以看到有app.js,app.json,app.wxss,project.config.json这四个文件和pages,utils这两个文件夹。


接下来谈谈每个文件和文件夹的作用

project.config.json

保存微信开发者工具的配置信息。微信小程序开发者工具自动在根目录下生成这个文件,用户可以在需要的时候导入这个文件从而导入文件中包含的个性化配置。

app.js

帮我们的微信小程序注册小程序应用

app.json

进行小程序的全局配置,比如配置网络请求的超时时间,窗口的表现,页面注册路径等。

app.wxss

微信小程序全局的一个样式

pages文件保存了小程序的页面信息,pages文件夹下有js文件,json文件,wxml文件,wxss文件这四种文件


js文件保存了页面逻辑和数据交互,json文件保存了页面配置信息,wxml文件展示了页面元素和内容,wxss文件设置小程序页面的样式。

utils文件夹保存了工具函数,达到工具复用的目的。


从上面我们可以发现配置文件有两种,一种是app.json的全局配置文件,另外一种是页面配置文件。两种配置文件的联系和区别可以由下面的极客科技课程截图来表现,需要注意的是页面配置项如果和全局配置项重复了,那么页面配置项会覆盖掉全局配置项。




作为新手,我对于小程序理解不太到位。我认识多了一丢丢之后发现其实文件夹应该是可有可无的,但以app开头的全局配置文件和四个页面配置文件是会存在的,不一定存放在文件夹里面而已。文件夹的设置是为了更方便简洁地开发小程序。

2019-01-24 11:44:29 wenxingchen 阅读数 6725
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:

第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

 

第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:

 

第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

 

如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示

 

办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

 

方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

 

如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

2018-04-15 17:35:24 not_so_bad 阅读数 630
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

首先,在已有小程序账号和填写完基本信息的前提下,打开微信开发者工具,点击小程序项目

然后出现下图所示窗口,在项目目录里填上你所期望的小程序根目录,如果这一栏不填,开发工具会自动添加一个根目录,建议自己设置根目录比较好;AppID填写在小程序微信公众平台开发设置中找的小程序id或者是点击体验后面蓝色的“小程序”;项目名称是传统的helloworld。初学的话建议别勾选下面的建立模板。接着点 确定 。

 

点击编译界面左上方的加号,创建app.js文件

app.js文件是注册小程序的,我们可以调用一个空的App函数App({})

我们创建一个文件夹来保存页面的配置。首先,创建一个名为pages的目录,然后在这个目录里创建一个名为helloworld的目录用来保存helloworld页面的配置。

在hellowworld目录下创建helloworld.js,helloworld.json, helloworld.wxml, helloworld.wxss文件。

helloworld.js文件是为这个小程序页面注册的文件,和app.js一样,先写一个空的函数Page({})

然后在helloworld.json里填入一个空的配置对象{}

接着编辑helloworld.wxml文件用来描述该页面内容,写上下面代码

 

<view>HelloWorld</view>

helloworld.wxss文件是用来配置页面内容样式的文件,可以什么都不写,页面内容会以默认方式显示。但这里我们配置一下宽度和高度以及位置

 

view{

width: 100%;

height:40rpx;

text-align:center;

}

 

 

页面内容已经配置完成了,现在需要向小程序注册页面的路径。在首页,即直接点编辑器左上角加号创建一个app.json的文件

写上如下代码,代码里包含了helloworld页面的路径(从根目录往后的路径)

 

{

"pages":[

"pages/helloworld/helloworld"

]

}

最后,点击工具栏的编译按钮,左侧编译器表示如下图。。。。哦耶,第一个小程序诞生

2018-04-15 23:45:35 pomelo_W 阅读数 1163
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序学习日志之工具配置及创建简单页面


1.任务与分工

在这次点餐系统项目中,我和我所在的小程序组的共三个成员主要负责小程序前端的实现。我们针对菜单,点菜清单(结算页面)以及评论三个主要页面进行了初步的实现。

其中我负责的是评论页,需要实现的是展示出全部的客户的评价。

这是我第一次参与小程序的项目,因此简单学习了一些关于微信小程序的前端实现的知识,在此简要记录下自己的经历与收获。


2.开发者工具使用的学习

微信web开发者工具是一款主要面向小程序开发的项目工具。

安装工具

前往开发者工具下载页面,根据自己的操作系统选择下载对应的安装包,这里我选择了win64版本。下载结束后,按照正常步骤提示安装即可。

上手使用

start

安装完成,打开开发者工具,可以看到登录页面是这样的。开始一个项目之前需要填入项目目录,APPID,以及项目名称三样东西。

  • 项目目录:是项目在本地保存的地址,可以选择github上的这个项目的仓库目录,方便以后的修改与提交。
  • AppID:小程序的 AppID 相当于小程序平台的一个身份证,可以到小程序的官方网站进行注册,完成注册后,登录微信公众平台的网站可以查看自己刚刚注册的AppID了。
  • 项目名称:给自己的项目起一个名字,这个可以按照自己的喜好来。

登陆后,可以选择新建一个空项目。这里,我选择直接将github上的项目直接导入(即在登录时将项目目录选择为仓库的本地地址)。

开发者工具的界面纵向分为三大部分:左侧为模拟运行的显示,中间是项目文件目录,右侧是代码区,可以直接修改代码。而左侧的页面也会随着右侧代码的修改进行动态的更新。此外,如果在模拟运行的过程中代码出错,不会显示上次的是正确运行,而会显示错误提示,根据提示修改代码即可。

整体来说,和VS的UWP项目的设计还是挺像的。模拟运行这一点也给实际操作过程带来了很大便利。
与VS不同的一点是,左侧的界面每次都是从微信登录进入的主界面开始的,也就是说需要一些跳转按钮才能手动到达子界面(在vs中,预览图始终显示的是当前代码编辑的页面)

下图是我们的项目文件目录,其中所有的页面被放进了pages文件夹,图片暂时被放在本地目录中。

structure


3.WeUI使用的学习

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI库,包含button、cell、dialog、toast、article、icon等各式元素,是为微信 Web 开发量身设计的,可以令用户的使用感知更加统一。

使用它的另一个主要原因,也是因为其简便性。下面介绍它的使用。

  • 下载
    进入WeUI for 小程序 (weui-wxss)的github页面,选择右侧的“Download zip”,将程序包下载到本地。

  • 导入
    解压后打开,我们需要的“weui-wxss-master\dist\style\”目录下的“weiui.wxss” 文件,它定义了weiui中的各种样式。将weiui.wxss导入我们自己的项目中的方式有两种(两种方法都可以,选择一种即可):

    - 复制:直接将weiui.wxss中的代码复制粘贴到我们项目中的app.wxss文件中;
    
    - 新建:在开发者工具中app.wxss所在的文件夹新建一个名为weiui.wxs的文件(或者直接将weiui.wxss拖入这个文件夹,开发者工具会自动更新你在本地目录中的修改),然后记得在app.wxss文件的头部加入以下代码(声明全局引用'weui.wxss'文件):
    
    @import 'weui.wxss';
  • 运行demo

weiui的demo中展示了各种组件的用法,导入官方的样例demo,你可以看到各种组件的样式,然后选择你要用的组件应用到自己的代码中即可。

这里需要新建一个项目,项目地址就用解压的压缩包的“weui-wxss-master\dist”地址就可以(demo就在里面)。等待demo加载出来后,可以看到:

weiui_demo

点击进入各个组件,可以查看组件各种类型的样式。

  • 移植使用

结合前面的demo,你可能在浏览demo中的组件的过程中,看到了一个你正需要的样式的组件,那么,你只需要找到这个组件对应的xml页面中的代码,将你需要的部分复制粘贴到自己的项目中,首先确定样式的正确性(检查样式有没有少了哪些部分),然后结合自己的实际设计进行修改即可。

总体来说,是十分简单的。


4.评论页的构建

本次任务中,主要完成的是对商家的评价的展示,我列出的需要展示的部分如下:

  • 评论内容:文字内容的展示,评论图片(需要考虑有/无图片两种情况下的排版问题),以及星级评价(可以用更加新颖的小图标代替星)
  • 评论日期:遵从xxxx-xx-xx的格式(展示在评论上方还是下方?)
  • 评论者的信息:昵称(可能需要考虑是否匿名问题),评论论者的头像(采用圆形裁剪还是正方形)
  • 添加新的评论:能能浏览之后想要加入自己的评价。

此上是内容部分,除此之外,需要添加主页到评论页的跳转函数,以及返回函数。
主要用到了带图标。说明项的列表项(weui-cell)以及一些图片、文字的排版摆放位置。


5.结果展示

下面是对最终商家评论页面的展示:

  • 在菜单主页,点击上方的评论按钮,就会跳转到商家评论页:

mainToComment

下面是跳转的结果:

comment


5.思考与改进

这次出现的一个较大问题是图片本地上传,导致小程序体积太大无法上传的问题。

考虑在下一次周期中做出改进,考虑的方案有两个:

  • 将图片保存到腾讯云
  • 将图片传入github的img文件夹。

uni-app-console

阅读数 164

微信公众号开发1

阅读数 261

微信公共平台开发,新手日志。

博文 来自: stationxp
没有更多推荐了,返回首页