2019-07-28 15:56:36 qq_42286669 阅读数 21
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

我将持续在近期博客中更新我所总结的微信小程序知识,都是根据书本和个人经验总结的,作为一种记录,也希望能对其他人有点帮助。

1.调试器区域工具

  1. Console窗口:用来显示小程序的错误输入信息和调试代码
  2. Sources窗口:用于显示当前项目的脚本文件
  3. Network窗口:用来观察发送的请求和调用文件的信息,包括文件名称、路径、大小、调用的状态、时间等
  4. Storage窗口:用于显示当前项目,使用wx.setStorage或者wx.setStorageSync后的数据存储情况
  5. AppData窗口:用于显示当前项目当前时刻的具体数据,实时地反馈项目数据情况。用户可以在此编辑数据,并及时地反馈到界面上。

2.微信小程序开发原理

  1. 在js文件里面进行业务逻辑的处理,动态地提供数据:逻辑层语言
  2. 在wxml文件里绑定数据,渲染界面:视图层描述语言
  3. 在wxss文件里添加样式,美化界面:视图样式

3.微信小程序目录介绍
微信小程序目录介绍
(1)框架全局文件:
app.js:必需,作用是装载小程序逻辑
app,json:必需,作用是装载小程序公共设置
app.wxss:非必需,作用是装载小程序公共样式
project.config.json:必需,作用是装载小程序项目个性化配置

//1 app.js小程序逻辑

App({
  onLaunch: function () {//生命周期函数
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({//登陆操作
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({  // 获取用户信息
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {// 定义全局数据
    userInfo: null
  }
})

//2 app.json的5个功能
app.json的5个功能
1.配置页面路径:页面路径定义了一个数组,存放多个页面的访问路径,它是进行页面访问的必要条件。

2.配置窗口表现:用于配置小程序的状态栏、导航条、标题和窗口背景色
1) 可以设置导航条背景色 navigationBarBackgroundColor
2) 设置导航条文字 navigationBarTitleText
3) 设置导航条文字颜色 navigationBarTextColor
4) 设置是否下拉刷新 enablePullDownRefresh
5) 设置窗口的背景色 backgroundColor
6) 设置下拉背景字体或者loading样式 backgroundTextStyle

3.配置标签导航:需要在app.json里面配置tabBar属性,可以配置标签导航文字的默认颜色、选中颜色,标签导航背景颜色以及上边框颜色(black/white)

4.配置网络超时:可以配置网络请求、文件上传、文件下载时最大的请求时间,超过这个时间,则不再请求。

5.配置debug模式:配置debug模式可以方便微信小程序开发程序

//3 app.wxss小程序公共样式表
与css基本兼容,但是形成了自己的风格,可以定义一个全局样式,只要页面有全局样式里的class,就可以渲染全局样式里的效果,但如果页面又重新定义了这个class样式,则会把全局的覆盖掉,使用自己的样式。

//4 project.config.json小程序项目个性化配置文件
用户在工具上做的任何配置都会写入这个文件,以便重新安装程序或者更换计算机时开发者工具恢复到开发项目时的个性化配置,包括编辑器的颜色、代码上传自动压缩等一系列选项。

(2)工具类文件:

utils文件夹:用来存放工具栏的js函数,例如可以设置一些日期格式化的函数、时间格式化等的函数等一些常用的函数。
定义完这些函数后,要通过module.exports将定义的函数名称注册进来,在其他的页面才可以使用。

(3)框架页面文件:

框架页面文件由5个文件组成

  1. logs.js页面逻辑:必填,作用是页面逻辑
  2. logs.json页面配置:非必填,作用是页面配置
  3. logs.wxml页面结构:必填,作用是页面结构
  4. logs.wxs小程序脚本语言:非必填,作用是小程序脚本语言
  5. logs.wxss页面样式表:非必填,作用是页面样式表

(4).js文件中的Page详解

Page({
  data: {//0001提供数据源motto,data数据可以动态绑定到WXML页面中
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

(4.1)页面初始化数据:
data为页面初始化数据,初始化数据将作为页面的第一次渲染。data会为以json的形式由逻辑层传至渲染层,所以数据必须是可以转成json的格式:字符串、数字、布尔值、对象或数组。渲染界面可以通过wxml对数据进行绑定。

(4.2)生命周期函数:
onLoad页面加载:一个页面只会调用一次,接受页面参数可以获取wx.navigateTo和wx.redirectTo及中的query。
onShow页面显示:每次打开页面都会调用一次。
onReady页面初次渲染完成:一个页面只会调用一次,代表页面已经准备妥当
onHide页面隐藏:当调用navigateTo或底部tab切换调用
onUnload页面卸载:当调用redirectTo或navigateBack的时候调用

(4.3)页面相关事件处理函数:
onPullDownRefresh下拉刷新:监视用户下拉刷新事件,需要在config的window选项中开启enablePullDownRefresh。

onShareAppMassage用户分享:只会定义了此事件处理函数,右上角菜单才会显示“分享”钮,用户点击后会调用此函数,此事件需要返回一个Object参数,用于自定义分享内容Object参数说明如下:
title:分享标题(当前小程序名称)
desc:分享描述(当前小程序描述)
path:分享路径(当前页面path,必须是以/开头的完整路径)

onShareAppMassage: function(){
    return{
      title:'自定义标题',
      desc:'自定义描述',
      path:'/page/user?id=123'
    }
  }

(4.4)页面路由管理:
微信小程序的页面路径都是由微信小程序框架来管理的,框架以栈的形式维护了所有页面。栈:后进先出,只能在一端进行插入和删除操作。

(4.5)自定义函数:
例如:

<view bintap=”clickMe”>click Me</view>

Page({
	clickMe:function(){
	Console.log(‘view tap’)
}
})

(4.6) setData设值函数:
Page.prototype.setData()设置函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。
setData()参数格式:接受一个对象,以key,value的形式表示出将this.data的key对应的值改变成value。

2019-10-28 09:01:26 weixin_43908333 阅读数 24
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和注册账号,不懂的小伙伴们可以观看我之前发过的教程哦。
#####下面我将手把手地教大家如何开发自己的第一个微信小程序实例–计算器
注意:在代码块中的/xxx或//xxx代表着注释,不是代码的一部分!!

  • 第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交)
  • 第二步 我们直接选择打开miniprogram-4小程序
  • 第三步 我们直接点击我们看到的app.json,如下图所示,我们不用右击一个一个创建目录、.js、.json、.wxml、.wxss。直接输入我们要创建的页面路径,具体操作如下代码块所示
/*直接将"pages":[参数]中的参数删除,我们要创建界面在pages下,名称为a2的界面。@是更改的内容*/
  "pages": [
    "pages/a2/a2"  /@直接在这里创建目录(系统会自动补充四个文件)
  ],
  "window": {
    "backgroundTextStyle": "light",/下拉背景字体,loading图的样式,仅支持(light/dark)
    "navigationBarBackgroundColor": "#fff",/导航栏背景颜色(#000000)
    "navigationBarTitleText": "WeChat",/导航栏标题文字内容
    "navigationBarTextStyle": "black"/导航栏标题颜色(仅支持black/white)
  },
  "sitemapLocation": "sitemap.json"/小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引
}

更改前:界面结构如下
更改后:界面结构中多出来了一个a2目录,并且该目录下也同时创建了相应的a2.js、a2.json、a2.wxml、a2.wxss.

  • 第四步 我们开始写简易计算器的界面(标题、背景颜色、字体、是否允许下拉刷…),我们打开a2目录下的a2.wxml,这里的微信ml相当于HTML,我们在这里通过标签设置我们的界面.
<view class="btngroup">//这里使用view视图容器组件(分区分块)来设置四个不同的按钮一行/一列显示
  <button class="btn-item">清除</button>//这里通过button(按钮)来设置一个清除按钮
  <button class="btn-item">回退</button>
  <button class="btn-item">//class="xxx",支持在.wxss中使用xxx来控制组件的样式。
    <icon type="waiting"></icon>//这里不使用文字,而是通过微信自带的图标嵌入第三个按钮上
  </button>
  <button class="btn-item">/</button>
</view>

更改前模拟器的界面如下所示:一片空白更改后点击编译后模拟器的界面内容如下所示:

  • 第五步 我们打开a2目录下的a2.wxss输入下面代码块中的命令对整个界面的布局进行调整(四个按钮横向摆放、按钮的宽度、文体的居中…)
//在.wxml中<button class="btn-item">class="xxx",支持在.wxss中使用xxx来控制组件的样式。
/*上面的wxml中 view定义了一个class"btngroup",通过设置.btngroup的样式属性来更改*/
.btngroup{
  display: flex; /设置多栏多列布局
  flex-direction: row; /view容器中的组件为横向排列
}
/*button定义了一个class"btn-item"*/
.btn-item{
  width: 190rpx; /宽度为190rpx(相当于整个微信屏幕的1/4)
  text-align: center; /对齐元素中的文本(居中)
  line-height: 150rpx; /设置行高15rpx
  border-radius: 0; /按钮的边框角度为0,将圆角边框变为矩形框
}

设置a2.wxss后的界面如下所示:

  • 第六步 依葫芦画瓢,继续在a2.wxml中添加计算器其他部分的代码(1-9 ±/*…)
<view class="btngroup">
  <button class="btn-item">清除</button>
  <button class="btn-item">回退</button>
  <button class="btn-item">
    <icon type="waiting"></icon>
  </button>
  <button class="btn-item">/</button>
</view>
<view class="btngroup">
  <button class="btn-item">4</button>
  <button class="btn-item">5</button>
  <button class="btn-item">6</button>
  <button class="btn-item">-</button>
</view>
<view class="btngroup">
  <button class="btn-item">1</button>
  <button class="btn-item">2</button>
  <button class="btn-item">3</button>
  <button class="btn-item">+</button>
</view>
<view class="btngroup">
  <button class="btn-item">0</button>
  <button class="btn-item">.</button>
  <button class="btn-item">=</button>
</view>

更改之后的模拟器显示界面如下所示:

  • 第七步:我们看上面的界面觉得还是有点不对劲,最下面一行的只有三个按钮,明显与上面的一行四个按钮格格不入,这是我们打开a2.wxml,在class里面加入一个zero,打开a2.wxss,将零按钮的宽度加长
//a2.wxml
<button class="btn-item">0</button>//修改代码前
<button class="btn-item zero">0</button>//修改代码后
/在原来的a2.wxss中加入如下代码块
.zero{
  width: 376rpx;
}

更改代码后模拟器显示界面如下:

  • 第八步:计算器的键盘应该是放置于最底部的,因此,我们添加如下代码块将键盘放置在最底部,首先我们将显示四行按钮的代码放入一个新的view中做为子view,添加一个class=“bottom”,同时我们在a2.wxss中添加bottom的样式距离底部距离为0
/a2.wxml添加如下内容
<view class="bottom">
  <view class="btngroup">xxx</view>
  <view class="btngroup">xxx</view>
  <view class="btngroup">xxx</view>
  <view class="btngroup">xxx</view>
</view>

/a2.wxss中添加如下代码内容
.bottom{
  position: fixed; //生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  bottom: 0; //距离底部0px:
}

更改后得模拟器界面如下:这是的a2.wxml中存在的内容截图为:(a2.js、a2.json我们到这步一直不去动它)这是的a2.wxss中存在的内容截图为:

  • 第九步:既然是计算器,那么我们应该有显示界面,so我们在a2.wxss中添加如下代码块,还有就是为了整个界面的美观性我们的键盘应该有不同的颜色,所以,我们对不同的按钮添加不同的class=“white/orange/gry”,在a2.wxss中添加对应的.white{白色},.orange{橙色},.gry{灰色}
//a2.wxml
<button class="btn-item gry">清除</button>
<button class="btn-item white">4</button>
<button class="btn-item orange">+</button>
//a2.wxss
page{
  background: #000 //定义该显示屏的颜色为黑色
}
.white{
  background:#EFEFED; 
}
.orange{
  background: #FC9504;
}
.gry{
  background: #CFCFCF;
}

更改后模拟器界面如下所示:

  • 第十步:我们添加一个白色的000来定位我们使用计算器计算出来的值显示的位置
<view class="screen"> //定义嵌套的两个view,第一个view将整个黑色的背景框固定下来
  <view>000</view> //第二个view用于定位000的显示位置
</view>
.screen{     //class="screen" -->.screen{xxx}
  position: fixed;  
  bottom: 750rpx;
  word-wrap: break-word; /允许长单词换行到下一行:
  width: 745rpx;
}
.screen view{   /嵌套的class可以直接通过.screen view{xxx}来调整嵌套在内部的各个属性
  color: #fff; /白色
  font-size: 30px; /字体大小
  text-align: right; /字体靠右显示
  margin-right: 30rpx; /距离右端30rpx
}

更改后模拟器界面如下所示:

  • 第十一步:更改icon图标的颜色和显示的位置
/a2.wxml
<icon type="waiting"></icon>/更改前
<icon type="waiting" size='30' color="#999"></icon>/更改后
/a2.wxss,注意,这里不是.icon{},而是icon{}
icon{
  position: absolute; /生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
  left: 55rpx;
  top:37rpx;
}
button::after{  /将各个圆角按钮变成矩形按钮
  border-radius: 0;
}

更改后的模拟器显示界面为:

  • 第十二步:我们为每个按钮添加一个事件,我们点击按钮时,按钮的颜色会变化成灰色0.2s,来模拟我们点击计算器的效果
/a2.wxml
<button class="btn-item gry">清除</button>/更改前
<button hover-class="shadow" class="btn-item gry">清除</button>/更改后(注:所有的按钮全部加上hover-class="shadow")
/a2.wxss
.shadow{
  background: #999;
}

为了让大家更加直观的感受到,按键前后发生的变化,这里采用对比图
点击之前:点击完之后:

  • 第十三步:之前小编出现了一个小错误,我们只有1-6,没有7 8 9的,所以我们补充之前落下的东西,在界面上添加一行789*
/a2.wxml中在整个界面中添加下面的代码块
<view class="btngroup">
    <button hover-class="shadow" class="btn-item white">7</button>
    <button hover-class="shadow" class="btn-item white">8</button>
    <button hover-class="shadow" class="btn-item white">9</button>
    <button hover-class="shadow" class="btn-item orange">*</button>
  </view>
/a2.wxss 由于我们增加了一行,而整个界面是固定的,所以为了界面的美观我们应该更改按钮的高度
.btn-item{
  width: 189rpx;
  text-align: center;
  line-height: 145rpx;  /原来这里是180rpx
  border-radius: 0;
}

更改后的模拟器界面如下所示:

  • 第十四步:这个时候我们的界面已经全部搭建完成,下面我们开始写逻辑层的代码,也就是我们点击之后整个界面会发生什么变化,也就是从这里开始,我们开始写a2.js的代码
/a2.js 原来的a2.js中的系统默认给我们的代码全部删除,增加如下代码
Page({
  data: {  /通过id值的不同来绑定每一个不同的按钮
    id1:"clear",
    id2:"back",
    id3:"history",
    id4:"div",
    id5:"num_7",
    id6:"num_8",
    id7:"num_9",
    id8:"mul",
    id9:"num_4",
    id10:"num_5",
    id11:"num_6",
    id12:"sub",
    id13:"num_1",
    id14:"num_2",
    id15:"num_3",
    id16:"add",
    id17:"num_0",
    id18:"dot",
    id19:"equals",

    result:"0",
  },
})
/a2.wxml
<view class="screen">
  <view>{{result}}</view>
</view> //更改前

<view class="screen">
  <view>{{result}}</view>
</view> //更改后通过a2.js中data的result来绑定这个view的具体值
**********************************************************
//更改前
<button hover-class="shadow" class="btn-item gry">清除</button>
//更改后(通过使用我们a2.js中定义的键值对的键来标识不同的按钮)
<button id="{{id1}}" hover-class="shadow" class="btn-item gry">回退</button>
  • 第十五步:这是稍微复杂的一步,大家注意理解。首先我们将通过在view控件添加bindtap="clickButton"来实现事件的处理
/a2.wxml
 <button id="{{id1}}" hover-class="shadow" class="btn-item gry">清除</button>/更改前
 <button id="{{id1}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">清除</button>/更改后
/a2.js
Page({
  data: {
    id1:"clear",
    id2:"back",
    id3:"history",
    id4:"div",
    id5:"num_7",
    id6:"num_8",
    id7:"num_9",
    id8:"mul",
    id9:"num_4",
    id10:"num_5",
    id11:"num_6",
    id12:"sub",
    id13:"num_1",
    id14:"num_2",
    id15:"num_3",
    id16:"add",
    id17:"num_0",
    id18:"dot",
    id19:"equals",

    result:"0",
  },
   clickButton: function(e){  /实现对bindtap="clickButton"的clickvButton的功能函数
    console.log(e);   /打印log 具体可见log1图
    var btnValue=e.target.id;  /由图可知,我们的通过id绑定之后我们能够id来识别该按钮
    var res=this.data.result;  /通过res来接收并判断data中result的值
    if(btnValue>="num_0"&&btnValue<="num_9"){
      console.log(btnValue.split('_'));  /打印log 具体可见log2图
      var num=btnValue.split('_')[1];   /将id中num_1中的1分离出来
      if(res=="0"){  /如果res还是等于0,那么说明数字按钮0按下了,那么显示屏上应该显示数字0
        res=num;
      }else{   /如果res不等于0,那么我们就在该数字后面添加按下的数字
        res=res+num;
      }
    }
    this.setData({   /通过setData 将按下的值传给data中的result:xxx,然后通过a2.wxml来显示我们更改的xxx的值
      result: res,
    });
  }
})

因为有的小伙伴可能已经糊涂了,所以我把从开始写计算器开始到现在的代码贴出来,如下所示:
a2.js到现在的全部代码:

Page({
  data: {
    id1:"clear",
    id2:"back",
    id3:"history",
    id4:"div",
    id5:"num_7",
    id6:"num_8",
    id7:"num_9",
    id8:"mul",
    id9:"num_4",
    id10:"num_5",
    id11:"num_6",
    id12:"sub",
    id13:"num_1",
    id14:"num_2",
    id15:"num_3",
    id16:"add",
    id17:"num_0",
    id18:"dot",
    id19:"equals",

    result:"0",
  },
  clickButton: function(e){
    console.log(e);
    var btnValue=e.target.id;
    var res=this.data.result;
    if(btnValue>="num_0"&&btnValue<="num_9"){
      console.log(btnValue.split('_'));
      var num=btnValue.split('_')[1];
      if(res=="0"){
        res=num;
      }else{
        res=res+num;
      }
    }
    this.setData({
      result: res,
    });
  }
})

a2.wxml到现在的全部代码:

<view class="screen">
  <view>{{result}}</view>
</view>
<view class="bottom">
  <view class="btngroup">
    <button id="{{id1}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">清除</button>
    <button id="{{id2}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">回退</button>
    <button id="{{id3}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">
      <icon type="waiting" size='30' color="#999"></icon>
    </button>
    <button id="{{id4}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">/</button>
  </view>

  <view class="btngroup">
    <button id="{{id5}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">7</button>
    <button id="{{id6}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">8</button>
    <button id="{{id7}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">9</button>
    <button id="{{id8}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">*</button>
  </view>

  <view class="btngroup">
    <button id="{{id9}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">4</button>
    <button id="{{id10}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">5</button>
    <button id="{{id11}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">6</button>
    <button id="{{id12}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">-</button>
  </view>

  <view class="btngroup">
    <button id="{{id13}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">1</button>
    <button id="{{id14}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">2</button>
    <button id="{{id15}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">3</button>
    <button id="{{id16}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">+</button>
  </view>

  <view class="btngroup">
    <button id="{{id17}}" bindtap="clickButton" hover-class="shadow" class="btn-item zero white">0</button>
    <button id="{{id18}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">.</button>
    <button id="{{id19}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">=</button>
  </view>
</view>

a2.wxss到现在的全部代码:

page{
  background: #000;
}
.btngroup{
  display: flex;
  flex-direction: row;
}
.btn-item{
  width: 189rpx;
  text-align: center;
  line-height: 145rpx;
  border-radius: 0;
}
.zero{
  width: 376rpx;
}
.bottom{
  position: fixed;
  bottom: 0;
}
.white{
  background:#EFEFED;
}
.orange{
  background: #FC9504;
}
.gry{
  background: #CFCFCF;
}
.screen{
  position: fixed;
  bottom: 750rpx;
  word-wrap: break-word;
  width: 745rpx;
}
.screen view{
  color: #fff;
  font-size: 30px;
  text-align: right;
  margin-right: 30rpx;
}
icon{
  position: absolute;
  left: 55rpx;
  top:37rpx;
}
button::after{
  border-radius: 0;
}
.shadow{
  background: #999;
}

log1图:log2图:按下0后的模拟器界面图:连续按下0123456789后的模拟器界面图:

  • 第十六步:按下小数点时可以在显示屏上的数字后面跟上一个小数点,如果后面继续按下小数点则无效,只有按下的第一个小数点有效,代码更改如下所示:
/a2.js 新增加的部分,后面会有注释说明这一步产生的作用
Page({
  data: {
    id1:"clear",
    id2:"back",
    id3:"history",
    id4:"div",
    id5:"num_7",
    id6:"num_8",
    id7:"num_9",
    id8:"mul",
    id9:"num_4",
    id10:"num_5",
    id11:"num_6",
    id12:"sub",
    id13:"num_1",
    id14:"num_2",
    id15:"num_3",
    id16:"add",
    id17:"num_0",
    id18:"dot",
    id19:"equals",

    result:"0",
    dotSign:false,  /增加一个键值dotSign:false,用来判断如果小数点按下该值变为真,如果下次再按则不会再次出现小数点
  },
  clickButton: function(e){
    console.log(e);
    var btnValue=e.target.id;  /获取id的值,小数点的btnValue值为dot
    var res=this.data.result;
    var newDotSign=this.data.dotSign; /通过一个变量newDotSign来接收dotSign的值(true/false)
    if(btnValue>="num_0"&&btnValue<="num_9"){
      console.log(btnValue.split('_'));
      var num=btnValue.split('_')[1];
      if(res=="0"){
        res=num;
      }else{
        res=res+num;
      }
    }else{     /上面用来判断数字的显示,这里使用else来判断小数点的按下后是否显示
      if (btnValue=="dot"){  /如果是小数点
        if(!newDotSign){ /如果!newDotSign是为false,则代表添加小数点,如果为true,则不显示
          res=res+'.';  /在数字的后面添加一个小数点,+代表连接符
          newDotSign=true; /将newDotSign置为true,用于下一次判断按下小数点将不会显示
        }
      }
    }

    this.setData({
      result: res,
      dotSign:newDotSign, /通过设置dotSign: true/false更新整个的data的值
    });
  }
})

更新代码后模拟器界面如下所示:

  • 第十七步:我们来设置清除和回退的功能按钮
/a2.js
  clickButton: function(e){
    console.log(e);
    var btnValue=e.target.id;
    var res=this.data.result;
    var newDotSign=this.data.dotSign;
    if(btnValue>="num_0"&&btnValue<="num_9"){
      console.log(btnValue.split('_'));
      var num=btnValue.split('_')[1];
      if(res=="0"){
        res=num;
      }else{
        res=res+num;
      }
    }else{
      if (btnValue=="dot"){
        if(!newDotSign){
          res=res+'.';
          newDotSign=true;
        }
      }else if(btnValue=="clear"){  /如果btnValue值等于清除
        res="0";  /设置res=0,显示在屏幕上的就是0
        newDotSign = false; /重新设置小数点为默认值false 表示可以再次按下显示
      }else if(btnValue=="back"){ /如果btnValue值等于回退
        var length=res.length; /通过length获取目前屏幕上res的长度,也就是上一次按键结束,这一次按键开始前屏幕上显示的数
        if(length>1){ /如果长度>1
          res=res.substr(0,length-1); /通过substr截图从0-倒数第二个数,然后更新res的值
        }else{ /如果长度=1或者=0那么就会设置res的值为0
          res="0";
        }
      }
    }

    this.setData({
      result: res,
      dotSign:newDotSign,
    });
  }
})

清除前模拟器的显示界面:清除后模拟器的显示界面:回退前模拟器的显示界面:长度>1是按下回退键之后的显示界面:长度=1/0时按下回退键之后的显示界面:

  • 第十八步:判断±*/四个按钮按下之后会出现的效果
 else if(btnValue=="back"){
        var length=res.length;
        if(length>1){
          res=res.substr(0,length-1);
        }else{
          res="0";
        }
      }else if(btnValue=="add"||btnValue=="sub"||btnValue=="mul"||btnValue=="div"){ /分别判断是否按下+-*/
        newDotSign=false;/小数点置为false表示按下符号之后可以再次输入小数点(12.5+15.5)
        var sign;
        switch (btnValue){ /分别将add-->"+" sub-->"-"...
          case "add":sign = "+"; break;
          case "sub":sign = "-"; break;
          case "mul":sign = "*"; break;
          case "div":sign = "/"; break;
        }
        if(!isNaN(res.charAt(res.length-1))){ /判断显示屏最后一个是否为符合,如果是不能再次按下符号,必须按下其他的数字后才能再次按下符号
          res = res + sign;
        }
      }
    }

    this.setData({
      result: res,
      dotSign:newDotSign,
    });

按下符号键的模拟器界面如下:

  • 第十九步:我们开始进行最为关键的等于号的逻辑结构代码编写,这次我们不用跟在后面写else,而是重新编写一个函数用于等于产生的结果的编写
/a2.wxml
<button id="{{id19}}" bindtap="equals" hover-class="shadow" class="btn-item orange">=</button>
/这里的bindtap="clickButton" 改为bindtap="equals"
 this.setData({
      result: res,
      dotSign:newDotSign,
    });
  }, /注意,这里要加一个逗号来结束上一段功能函数代码的结束
  equals:function(){ /等于号的函数功能编写
    var str=this.data.result; /先获取显示屏上的数字和符号例如10+2*3-4
    var strArr=[]; /定义一个数组用于分别存放数字和符号,存放方式为|10 + 2 * 3 - 4|
    var item=''; /定义一个item默认为空
    var temp=0;
    for(var i=0;i<=str.length;i++){ /循环获取整个显示屏上的内容
       var ch=str.charAt(i); /获取显示屏第i位的值为ch
       if((ch!=''&&ch>=0&&ch<=9)||ch=="."){ /如果ch!=空并且ch>=0 <=9 or ch==小数点
         item=item+ch; /item后连接显示屏第i位的值ch 例如10+2*3-4 第一次循环是" "连接1
       }else{ /如果是符号
         strArr[temp]=item; /将item的值10存入 strArr[0]中
         temp++; /temp=1
         strArr[temp]=ch; /再将符号"+"存入strArr[1]中
         temp++; /temp=2
         item=''; /item清空
       }
    }
    if (isNaN(strArr[strArr.length-1])){ /如果末尾有符号则清除末尾的符号,例如12+45+,则最后的"+"利用pop清除
      strArr.pop();
    }
    for (var i = 0; i <strArr.length; i++){ /依次打印数组中的每一项内容
      console.log(strArr[i]);
    }
  }

(10+2*3-4)log图如下所示:将整个输入的值分别保存至数组中,从而将数字与符号分隔开

  • 第二十步:最后我们来完善整个计算器,让计算器按下xx+xx=tt,让这个tt能在显示屏上面显示出来
/|10+2*3-4|,首先获取第一个数10(res),然后获取第一个符号,然后获取第二个数2(num),
             然后在进行res=res+num;
             然后获取第二个符号*,然后获取第三个数3为新的num
             然后进行res=res*num;接下来依次如此,知道算出来最后的res的值显示于主屏幕上

if (isNaN(strArr[strArr.length-1])){
      strArr.pop();
    }
    var res=strArr[0]*1; /这是按下等于号之后的将res的值变化为第一个数,例如按下7 接着按下=,则会出现=7
    var num;
    for(var i=1;i<strArr.length;i=i+2){ 两位两位跳,直接将符号提取出来
      if(res=="∞"){ /如果res=无穷大,那么直接跳出,显示=∞
        break;
      }
      num=strArr[i+1]*1; /数字等于符号后面的数
      switch (strArr[i]){ /判断符号为哪一个就执行哪一种运算
        case '+': res = res + num; break; 1+1=2 那么2就是新的res的值
        case '-': res = res - num; break;
        case '*': res = res * num; break;
        case '/':
        if(num!=0){ /如果分母为0,则res为无穷大,如果不为0,则进行除法运算
          res = res / num;
        }else{
          res="∞";
        }
        break;
      }
    }
    this.setData({
      result:"="+res, /设置result的值为=xxx
    });
  }

那么我们整个的计算器的基本功能算是完成了,下面小编将贴出来所有的代码,大家如果跟着我的步伐来,那么对于整个的逻辑和思路会比较清晰。

//a2.js
Page({
  data: {
    id1:"clear",
    id2:"back",
    id3:"history",
    id4:"div",
    id5:"num_7",
    id6:"num_8",
    id7:"num_9",
    id8:"mul",
    id9:"num_4",
    id10:"num_5",
    id11:"num_6",
    id12:"sub",
    id13:"num_1",
    id14:"num_2",
    id15:"num_3",
    id16:"add",
    id17:"num_0",
    id18:"dot",
    id19:"equals",

    result:"0",
    dotSign:false,
  },
  clickButton: function(e){
    console.log(e);
    var btnValue=e.target.id;
    var res=this.data.result;
    var newDotSign=this.data.dotSign;
    if(btnValue>="num_0"&&btnValue<="num_9"){
      console.log(btnValue.split('_'));
      var num=btnValue.split('_')[1];
      if (res == "0" || res.charAt(res.length - 1) == '∞'){
        res=num;
      }else{
        res=res+num;
      }
    }else{
      if (btnValue=="dot"){
        if(!newDotSign){
          res=res+'.';
          newDotSign=true;
        }
      }else if(btnValue=="clear"){
        res="0";
        newDotSign = false;
      }else if(btnValue=="back"){
        var length=res.length;
        if(length>1){
          res=res.substr(0,length-1);
        }else{
          res="0";
        }
      }else if(btnValue=="add"||btnValue=="sub"||btnValue=="mul"||btnValue=="div"){
        newDotSign=false;
        var sign;
        switch (btnValue){
          case "add":sign = "+"; break;
          case "sub":sign = "-"; break;
          case "mul":sign = "*"; break;
          case "div":sign = "/"; break;
        }
        if(!isNaN(res.charAt(res.length-1))){
          res = res + sign;
        }
      }
    }

    this.setData({
      result: res,
      dotSign:newDotSign,
    });
  },
  equals:function(){
    var str=this.data.result;
    var strArr=[];
    var item='';
    var temp=0;
    for(var i=0;i<=str.length;i++){
       var ch=str.charAt(i);
       if((ch!=''&&ch>=0&&ch<=9)||ch=="."){
         item=item+ch;
       }else{
         strArr[temp]=item;
         temp++;
         strArr[temp]=ch;
         temp++;
         item='';
       }
    }
    if (isNaN(strArr[strArr.length-1])){
      strArr.pop();
    }
    var res = parseInt(strArr[0]);
    var num;
    for(var i=1;i<strArr.length;i=i+2){
      if(res=="∞"){
        break;
      }
      num=strArr[i+1]*1;
      switch (strArr[i]){
        case '+': res = res + num; break;
        case '-': res = res - num; break;
        case '*': res = res * num; break;
        case '/':
        if(num!=0){
          res = res / num;
        }else{
          res="∞";
        }
        break;
      }
    }
    this.setData({
      result:"="+res,
    });
  }
})
//a2.wxml
<view class="screen">
  <view>{{result}}</view>
</view>
<view class="bottom">
  <view class="btngroup">
    <button id="{{id1}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">清除</button>
    <button id="{{id2}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">回退</button>
    <button id="{{id3}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">
      <icon type="waiting" size='30' color="#999"></icon>
    </button>
    <button id="{{id4}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">/</button>
  </view>

  <view class="btngroup">
    <button id="{{id5}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">7</button>
    <button id="{{id6}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">8</button>
    <button id="{{id7}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">9</button>
    <button id="{{id8}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">*</button>
  </view>

  <view class="btngroup">
    <button id="{{id9}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">4</button>
    <button id="{{id10}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">5</button>
    <button id="{{id11}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">6</button>
    <button id="{{id12}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">-</button>
  </view>

  <view class="btngroup">
    <button id="{{id13}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">1</button>
    <button id="{{id14}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">2</button>
    <button id="{{id15}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">3</button>
    <button id="{{id16}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">+</button>
  </view>

  <view class="btngroup">
    <button id="{{id17}}" bindtap="clickButton" hover-class="shadow" class="btn-item zero white">0</button>
    <button id="{{id18}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">.</button>
    <button id="{{id19}}" bindtap="equals" hover-class="shadow" class="btn-item orange">=</button>
  </view>
</view>
//a2.wxss
page{
  background: #000;
}
.btngroup{
  display: flex;
  flex-direction: row;
}
.btn-item{
  width: 189rpx;
  text-align: center;
  line-height: 145rpx;
  border-radius: 0;
}
.zero{
  width: 376rpx;
}
.bottom{
  position: fixed;
  bottom: 0;
}
.white{
  background:#EFEFED;
}
.orange{
  background: #FC9504;
}
.gry{
  background: #CFCFCF;
}
.screen{
  position: fixed;
  bottom: 750rpx;
  word-wrap: break-word;
  width: 745rpx;
}
.screen view{
  color: #fff;
  font-size: 30px;
  text-align: right;
  margin-right: 30rpx;
}
icon{
  position: absolute;
  left: 55rpx;
  top:37rpx;
}
button::after{
  border-radius: 0;
}
.shadow{
  background: #999;
}
//a2.json
{
  "usingComponents": {}
}

更改代码后模拟器截图如下所示:

  • 希望小编了几天时间写的这个教程能够帮助大家从一个不懂微信开发的新手们极大的缩短微信开发的周期和整个过程,并且跨过那道难以逾越的天堑,向着能够自己开发微信小程序的大佬们快速前进!!
2019-07-12 12:20:54 loveqdm 阅读数 171
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

就是把防火墙关掉
在这里插入图片描述
请把防火墙关闭 然后打开微信开发者工具就会显示文件了。我的就是这样解决的。
好了后 你可以在吧防火墙开启 也可以使用一个专有网络关闭防火墙。反正如果没有文件显示你就去关闭防火墙再打开就可以了。

2018-05-21 17:32:31 qq_36090190 阅读数 10921
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

一.开发平台和前期准备

1.前端工具:微信web开发者工具


web开发者工具,新建小程序项目,目录和名称自己随意填,AppID点击体验:小程序


小程序打开后,点击右上方的详情,项目设置,勾选不校验xxxxx

2.后台开发工具:eclipse

eclipse要求是java ee版的,并配置好tomcat,后面需要创建Dynamic Web Project

3.服务器:tomcat

4.数据库:mysql

二.目录截图

1.微信开发者工具目录截图

其中,.wxml 后缀文件相当于网页的HTML,.wxss文件相当于网页的css,.js 后缀文件是脚本逻辑文件,.json 后缀的 是JSON 配置文件,每一个页面都必定包含这四类文件!

2.eclipse目录截图

简单直白的讲就是,xxxServlet会接收微信小程序传过来的请求,然后xxxServlet会调用xxxDao完成请求,而无论是xxxServlet还是xxxDao都会调用xxxDTO来完成函数的调用,util是工具包,这包只有一个类DataAccess,该工具类是为了方便链接数据库。毫无疑问,一个完整的小程序,不会只向服务器发送一个请求,那么这时候我们就需要用到web.xml文件来控制请求的跳转了。

当然,我们还可以用SSM框架或者SSH框架来实现,但需要导入各种jar包等等一系列操作,并不利于初学者掌握,有兴趣的可以自己学习!

三.微信开发者工具

1.login.wxml

<view class="content">
  <view class="account">
    <view class="title">账号</view>
    <view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
   <view class="account">
    <view class="title">密码</view>
    <view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
    
  </view>
  <view class="hr"></view>
  <button class="btn" bindtap='login' type="primary">登录</button>
</view>
<view>{{message}}</view>

2.login.wxss

.content{
  margin-top: 40px;
}
.account{
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
}
.title{
   margin-right: 30px;
   font-weight: bold;
}
.hr{
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
  background-color: red;
}
.btn{
  width: 90%;
  margin-top:40px;
  color: #999999;
}

3.login.js

Page({
  //定义全局变量data
  data: {
    account: "",
    password: "",
    message:""
  },
  
   //处理accountInput的触发事件
  accountInput:function(e){
    var username = e.detail.value;//从页面获取到用户输入的用户名/邮箱/手机号
    if (username != ''){
      this.setData({ account: username });//把获取到的密码赋值给全局变量Date中的password
    }
  },
  //处理pwdBlurt的触发事件
  pwdBlur:function(e){
      var pwd = e.detail.value;//从页面获取到用户输入的密码
      if (pwd != ''){
        this.setData({ password: pwd });//把获取到的密码赋值给全局变量Date中的password
      }
  },
  //处理login的触发事件
  login: function (e) {
    wx.request({
      url: 'http://localhost:8080/API/login',//后面详细介绍
      //定义传到后台的数据
      data: {
        //从全局变量data中获取数据
        account: this.data.account,
        password: this.data.password,
      },
      method: 'get',//定义传到后台接受的是post方法还是get方法
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log("调用API成功");
        console.log(res.data.message);
        if (res.data.message=="ok"){
          wx.showToast({
            title: '登陆成功',
          })
        }
        else{
          wx.showModal({
            title: '提示',
            content:'用户名或者密码错误',
            showCancel:false
          })
        }
      },
      fail: function (res) {
        console.log("调用API失败");
      }
    })
  }
})

其中,url:'http:localhost:8080/API/login',localhost:8080,只要tomcat默认安装完成,端口没有改就是这个了,API是项目的名称,login是项目文件web.xml中的url-pattern的属性名,url很重要,一定要确保自己没有填错,不然就连接不了服务器了

4.登陆图

5.register.wxml

<!--pages/register/register.wxml-->
<view class="content">
  <view class="account">
    <view class="title">账号</view>
    <view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
  </view>
  <view class="hr"></view>
   <view class="account">
    <view class="title">密码</view>
    <view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
    
  </view>
  <view class="hr"></view>
  <button class="btn" type="primary" bindtap="register">注册</button>
</view>

6.register.wxss

/* pages/register/register.wxss */
.content{
  margin-top: 40px;
}
.account{
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
}
.title{
   margin-right: 30px;
   font-weight: bold;
}
.hr{
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
}
.see{
  position: absolute;
  right: 20px;
}
.btn{
  width: 90%;
  margin-top:40px;
  color: #999999;
}
.operate{
   display: flex;
   flex-direction: row;
}
.operate view{
  margin: 0 auto;
  margin-top:40px;
  font-size: 14px;
  color: #333333;
}
.register{
  display: flex;
  flex-direction: row;
  margin-top:150px;
}
.register view{
  margin: 0 auto;
}

7.register.js

// pages/register/register.js
Page({

  /**
   * 页面的初始数据
   * data为全局变量
   */
  data: {
    account: "",
    password: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  
  //处理accountInput的触发事件
  accountInput: function (e) {
    var username = e.detail.value;//从页面获取到用户输入的用户名/邮箱/手机号
    if (username != '') {
      this.setData({ account: username });//把获取到的密码赋值给date中的password
    }
  },
  //处理pwdBlur的触发事件
  pwdBlur: function (e) {
    var pwd = e.detail.value;//从页面获取到用户输入的密码
    if (pwd != '') {
      this.setData({ password: pwd });//把获取到的密码赋值给date中的password
    }
  },
  //处理register的触发事件
  register: function (e) {
    wx.request({
      url: 'http://localhost:8080/API/register',
      //定义传到后台的数据
      data: {
        //从全局变量data中获取数据
        account: this.data.account,
        password: this.data.password
      },
      method: 'get',//定义传到后台接受的是post方法还是get方法
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log("调用API成功");
        wx.switchTab({
          url: '../login/login'  // 注册成功,跳转到登陆页面
        })
      },
      fail: function (res) {
        console.log("调用API失败");
      }
    })
  }
})

8.注册图

    

9.app.json

{
  "pages": [
    "pages/login/login",
    "pages/register/register"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "登录",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/login/login",
        "text": "登陆"
      },
      {
        "pagePath": "pages/register/register",
        "text": "注册"
      }
    ]
  }
}

10.小结

以上部分是一个完整的微信小程序的前端部分,对于有一定HTML和CSS基础的人,应该不难看懂,假如看不懂,可以先去看看微信小程序开发文档



2018-12-27 13:06:04 Q_MUMU 阅读数 136
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

使用wepy框架开发小程序

  • wepy总的使用流程
    npm install -g wepy-cli
    wepy init empty wepyname
    cd wepyname & npm install
    wepy build --watch
    微信开发工具导入dist

注释

- **安装wepy脚手架工具:wepy-cli**
 - **全局安装:npm install -g wepy-cli**
 - **初始化项目**
	// 默认生成带有组件其他模块的项目(redux):
	wepy init standard wepyname  
	// 默认生成空白项目:
	wepy init empty wepyname
 **- 切换到项目目录:cd wepyname**
 **- 安装依赖:npm install**
 **注意:初始化项目时未输入appid的可以在项目根目录project.config.json中修改`appid`字段**
 **编译为小程序:wepy build --watch**
 编译后会在项目根目录生成一个dist文件夹,dist文件夹就是编译后的小程序项目,使用微信开发工具导入项目
通过vscode打开项目,wepy语法高亮需要安装vue的高亮插件 - Vetur

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