2019-05-08 20:37:52 qq_42036301 阅读数 318
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

完成该功能我们需要先完成两个步骤

1 去微信公众号平台,注册一个微信小程序,拿到APPID,没有APPID也能开发,但是部分功能会受限.

2 下载一个微信开发者工具.

当我们首次打开微信开发者工具时,他自带会有一些文件,然后我们在index.wxml写代码,如图

Index.js代码

 

Poster: 控件上的音频封面的图片资源地址,

Name: 音频的名字, author: 音频的作者

Src: 要播放音频的资源地址

结果显示;可以播放

如果想要好看一点,我们可以去Index.wxss添加自己喜欢的样式.还有上面标出的都是要相互对应的,否则会报错.

2019-09-15 17:21:47 wandou9527 阅读数 218
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

在小程序个人开发中,今天在项目里添加了几个图片,但上传代码时提示代码包过大(不可超过2M)。一阵纠结。现在介绍一个方式,把图片上传至网络,可在小程序中引用。重点是免费,适合个人开发练习。

方式 1 开发者工具自带云开发(免费)

在微信开发者工具左上方有个云开发图标,点击。弹出窗云开发控制台,点击开通,会要求输入环境名称,无特殊要求。后选择版本基础版是免费的。

云开发按钮

云开发有4个功能:运营分析、数据库、存储、云函数。这里主要用到存储。

在这里插入图片描述

然后点击上传文件,上传后会生成File ID,将File ID复制到image标签src下即可引用云端图片。

本人亲测 ok

官方文档: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/billing/quota.html

方式 2 七牛云存储(免费)

链接:https://portal.qiniu.com/signup

点击进入正常注册即可,注意,需要实名后才可领取免费空间,10GB。

具体步骤

1 登录后选择产品 - 对象存储 如下图:

在这里插入图片描述

2 然后创建空间,在内容管理中上传文件

在这里插入图片描述

区别

  • 访问速度:七牛快
  • 方便程度:微信开发者工具更方便

七牛云主机

七牛云主机

插播:腾讯云服务器

1核2G

2018-09-05 14:59:17 zhengyikuangge 阅读数 2378
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

这几个月都在忙着准备考研都不怎么研究代码了,前几天老师安排要做毕业设计的开题报告,所以就稍微兼顾着学习了点微信小程序的开发。昨天看了一会官方给的开发文档就是实例少了点,不过有个demo可以抠代码。等考研初试结束, 想自己写个文档总结一下小程序。


准备工作

开发工具:使用官方提供的“微信web开发者工具”就很好,可以在“微信公众平台”官网上下载。工具自带的工具,比如说上传、模拟器、调试器等都是很好用的
项目结构:很标准的网页开发结构(JS+HTML+CSS),只不过这里换了个名字(JS+WXML+WXSS)
项目创建:APPID需要到微信公众平台—设置—开发设置中查找
资源添加:貌似只能通过文件目录向项目中添加


小例子

实现结果:
这里写图片描述
实际上就是切换图片的功能

项目目录:
这里写图片描述
images是我自己创建的,图片添加需要在项目文件目录中添加
其他都是自动生成的,很容易理解,index.wxml就是主页面,index.js和index.wxss是其附属的

代码分析:
index.js:

Page({
  data: {
    //可以理解为定义属性
    index:1,
    mysrc:"../../images/image1.jpg",
    but_msg:"下一个",
    ifplus:true
  },
  button: function(e){
    //监听事件
    if (this.data.index + 1 == 6 && this.data.ifplus){
      this.data.ifplus = false
      this.data.index = 5
    }
    if (this.data.index - 1 == 1 && !this.data.ifplus){
      this.data.ifplus = true
      this.data.index = 0
    } 
    if (this.data.ifplus){
      this.data.index = this.data.index + 1
      if (this.data.index != 5) this.data.but_msg = "下一个"
      else this.data.but_msg = "上一个"

    }else{
      this.data.index = this.data.index - 1
      this.data.but_msg = "上一个"
    }


    this.setData({
      //在这里修改属性值可以刷新到页面,也就是改图片的地址和按钮里的文字
      mysrc: "../../images/image" + this.data.index + ".jpg",
      but_msg:this.data.but_msg
    })
  }
})

index.wxml:

<view class="container">
  <view class="userinfo">
  <text class="userinfo-nickname">欢迎大家</text>
  </view>
  <image bindtap='button' class="show" src="{{mysrc}}"></image>
  <button bindtap='button' class="button">{{but_msg}}</button>
  <!--mysrc,but_msg都是js中data中定义的属性 -->
  <!--bindtap可以看作是注册监听事件 -->
  <!--class是与样式表有关 -->
</view>

样式表基本没什么区别就不放上来了


真机测试

1、先从开发工具中上传代码这里写图片描述
2、在微信公众平台——开发管理中可以看到开发、审核、线上三个版本,工具上传到开发版本,在开发版本后面点击倒三角可以修改主页路径,如图示:这里写图片描述
也就是访问小程序的第一个页面,开发版本可以提交审核,审核版本可以提交上线,审核的时间比较长而且内容必须符合要求。
3、点击图中所示位置可以打开小程序二维码,扫码可以访问该小程序这里写图片描述

2018-07-11 20:28:46 qq_41681675 阅读数 16983
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序自带的API中的页面交互功能,虽然提示功能非常全面,但是所有的交互API中是没有可以自己在提示框中输入文本的功能,那么现在我们来自己做这样的一个提示框(可以带有输入功能),在提示框输入完内容之后,点击确定,可以将文本内容返回,点击取消则可以回到之前的状态。

(在这里,主页面的布局可以根据每个人的想法来布局,这里展示的css之后展示提示框部分的)


1、首先打开微信开发者工具,建立一个代码模板,那么我们这个提示框就是写在这个页面上。

    这里我们主页面叫做index

2、在基本页面中写上一个姓名的文本,当前姓名用<text>{{stuName}}</text>表示,然后为一个button按钮,再在js文件中,建立相应的点击事件以及stuName的信息。这样,一个原始页面就写好了。

下面我们开始弹出框页面的制作

<view class='toast-box' hidden='{{!ifName}}'>
        <view class='toastbg'></view>
        <view class='showToast'>
            <view class='toast-title'>
                <text>修改姓名</text>
            </view>
            <view class='toast-main'>
                <view class='toast-input'>
                    <input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'></input>
                </view>
            </view>
            <view class='toast-button'>
                <view class='button1'>
                    <button catchtap='cancel'>取消</button>
                </view>
                <view class='button2'>
                    <button catchtap='confirm'>确定</button>
                </view>
            </view>
        </view>
    </view>

3、我们可以发现,点击按钮后弹出输入框,如果点击除取消和确定之外的地方,是不会有反应的。为了做到这个功能,我们用一个绝对位置的渲染层(toastbg),覆盖住整个页面,并且如果你的页面长度没有滚动的话,请输入min—height:100vh,如果页面发生滚动,请把长度控制在height:100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明,opacity:0.2,即可

4、bindinput为写文本时所触发的事件,data-name为文本数据所保存的地方,在js中我们可以把这个数据打印出来,会发现我们所输入的文本信息。

以下为css的代码

.toast-box {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: fixed;
    top: 0px;
    left: 0px;
}

.toastbg {
    opacity: 0.2;
    background-color: black;
    position: absolute;
    width: 100%;
    min-height: 100vh;
}

.showToast {
    position: absolute;
    opacity: 1;
    width: 70%;
    margin-left: 15%;
    margin-top: 40%;
}

.toast-title {
    padding-left: 5%;
    background-color: #2196f3;
    color: white;
    padding-top: 2vh;
    padding-bottom: 2vh;
    border-top-right-radius: 16rpx;
    border-top-left-radius: 16rpx;
}

.toast-main {
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: white;
    text-align: center;
}

.toast-input {
    margin-left: 5%;
    margin-right: 5%;
    border: 1px solid #ddd;
    padding-left: 2vh;
    padding-right: 2vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.toast-button {
    display: flex;
}

.button1 {
    width: 50%;
}

.button2 {
    width: 50%;
}

.button1 button {
    width: 100%;
    background-color: white;
    color: red;
    border-radius: 0px;
    border-bottom-left-radius: 16rpx;
}

.button2 button{
    width: 100%;
    background-color: white;
    color: black;
    border-radius: 0px;
    border-bottom-right-radius: 16rpx;
}

.picker {
    padding-top: 1vh;
    padding-bottom: 1vh;
}

我们可以根据自己的喜欢,对提示框的样式进行改变


5、编写js代码,我们需要实现以下一些基本功能(点击出现弹窗,取消不改变数据值,确定进行判断数据值,若为空则不能改变,否则可以改变,并且主页面上的内容要变为相应改变后的内容)

6、给最外层的弹窗附上hidden(如图所示),为这个值初始为false,点击按钮后触发事件,改false为true,这样即可点击出现弹窗。

7、为取消按钮附上点击事件,与hidden的部分刚好相反即可。

8、为书写文本绑定事件,上述代码中命名为setValue,这个函数我们传入一个event进去,将其打印,我们可以发现在其的detail中有我们刚刚所书写的内容,我们将这个值,传给js中data一个属性,这里我们命名为edit。

9、为确定绑定事件,用this.data.edit将这个值进行判断,若为空,我们用wx.showToast提示用户信息没有填写完整,并且页面不会改变。若不为空,则我们setData一下我们的stuName为这个edit的值,并且重新把hidden的属性值改为false。

10、返回到初始页面我们就可以看到我们自己做得一个提示框,并且具有修改值的功能

2018-12-19 18:12:33 qq_37954086 阅读数 13276
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

使用vscode提高小程序开发效率

不知道大家开发小程序是用什么工具,如果是微信自带的开发者工具,相信我,看了这篇文章,你会重新做出选择的。

之前一段时间,我也一直使用微信开发者工具进行小程序的开发与调试,但是用过的就会有这种体会:

  • 代码编写区域太小,代码堆叠在一起,难以阅读
  • 自定义能力较弱,只能修改代码字体
  • 编辑器代码提示较少
  • 工具经常出现莫名的bug,时不时黑屏

在这里插入图片描述

因此,为了解决这些个问题,果断更换开发工具,这里推荐大家使用号称“宇宙第一IDE”的编辑器——vscode。安装方法不作赘述,主要介绍一下几个vscode插件,在vscode中搜索插件关键字点击安装即可。

minapp

支持微信小程序标签、属性的智能补全,并且提示中包含文档内容(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)。
在这里插入图片描述

wechat-snippet

这个插件主要的功能就是代码辅助,代码片段自动完成,可以作为上个插件的补充。
在这里插入图片描述

wxml

这款插件用于将wxml代码进行高亮显示,并且提供代码格式化的功能,可将代码格式化为较易阅读的样式。
在这里插入图片描述

有了上面这几款插件,便可以开始高效地撸代码了。至于代码的调试以及效果的查看,当然还是得打开微信开发者工具。将编辑器隐藏,调试工具调到最大,快速找到元素的位置,修改样式,Ctrl+S,提交代码,一顿操作猛如虎。

在这里插入图片描述


欢迎加我微信,一起交流,互相学习,共同进步!

在这里插入图片描述
关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。
在这里插入图片描述

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