2019-06-02 21:01:55 u014650759 阅读数 144
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小程序。

1.机型选择:小程序以IPhone7的屏幕尺寸为设计标准,让UI以IPhone7屏幕尺寸来切图。
2.预览界面:写好视图布局后点击编译,视图界面刷新显示
3.编译:代码更改后刷新编译。
4.预览界面:查看编译后的效果,仅限于登录开发工具的开发者本人可以扫码并预览,其他人无法扫码预览。
5.真机调试:扫描生成的二维码,真机进行调试。
6.资源文件:对应项目的文件目录,一般可以在这里进行断点调试。
7.数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
8.视图代码:标组件以子父层级结构呈现,方便查看调试。
9.9-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFile和downloadFile域名。注意:域名小程序要求必须是https
10.项目信息:展示项目所包含的文件,以及进行相关操作
11.代码区域:进行项目下具体文件的代码编辑

接下来,通过上面打开的项目,可以看到小程序框架以及目录结构,下面开始对代码架构目录做简要介绍:app.js、app.json、app.wxss

  1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。例如上面的界面展示了该代码文件中,数据存储操作,跳转登录页面,以及获取用户信息。
  2. ​app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序的窗口、背景色,配置导航条样式,配置默认标题,添加新的页面后也要在此文件中添加新页面申明。注意该文件不可添加任何注释。
  3. app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。其格式和写法,类似于css,不过是css的一个子集,也就是说有些css写法是不支持的。
  4. project.config.json是小程序的工具配置文件,可以做一些个性化配置,例如界面颜色、编译配置等等。在工具上做的任何配置都会写入到这个文件,当重新安装时,只要载入同一个项目的代码包,开发者工具就会自动配置,通常无需修改。
  5. sitemap.json是用来配置小程序及其页面是否允许被微信索引,当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中,通常无需修改。

这里上面讲解了小程序的项目文件,而小程序的交互是通过页面来进行的,所以同时我们也需要知道,小程序的页面组成,查看page文件夹下的页面文件,可以发现

总结,至此,我们已经大概知道了小程序的开发工具内部区域功能布局,及其项目结构文件介绍。

2019-11-17 14:03:10 steventian72 阅读数 22
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信开发者工具 项目目录结构

目录结构

|---主目录(项目描述文件)
|       |---app.js      主逻辑文件
|       |---app.json    主配置文件
|       |---app.wxss    主样式表
|---子目录(页面描述文件)
|       |---index.js    分支页面逻辑文件
|       |---index.json  分支页面配置文件
|       |---index.wxss  分支页面样式表
|       |---index.wxml  分支页面结构文件
|---子目录(资源文件)
2019-05-21 21:07:42 YuanMxy 阅读数 52
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

提取知识点

小程序

  • 使用 微信登录 微信开发者工具进行开发
  • 新建小程序需要填写AppID或使用测试号
  • 工具界面分为工具栏、模拟器、编辑器、调试器
  • 常用的4种文件:wxml、wxss、js、json

目录

一、微信开发者工具的下载

二、微信开发者工具的安装

三、微信开发者工具的简单使用

内容

一、微信开发者工具的下载

官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
在这里插入图片描述

二、微信开发者工具的安装

配置好安装路径,一路 下一步 即可
在这里插入图片描述

三、微信开发者工具的简单使用

1.打开后需要微信扫码登录

在这里插入图片描述

2.选择 小程序 +

在这里插入图片描述

3.填写项目信息

在这里插入图片描述
其中AppID需要登录微信公众平台(http://mp.weixin.qq.com/)获取,点击 查看详情
在这里插入图片描述
下拉至最底部,即显示 AppID
在这里插入图片描述

4.进入工具界面(本例使用测试号进行测试)

在这里插入图片描述

5.项目目录结构和代码结构

在这里插入图片描述

  • app.js 注册微信小程序应用
  • app.json 全局配置(如网络请求超时时间、各页面的注册路径)
  • app.wxss 全局样式
  • 注:以上三个文件必须放在项目的根目录
  • project.config.json 微信开发者工具的配置信息
  • pages文件夹 所有的小程序页面
  • utils文件夹 公共工具函数:代码复用
    其中 pages文件夹 最多有4种类型文件(.js .json .wxml .wxss 一个小程序页面由这四个文件组成 注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名)
    在这里插入图片描述
    我们可以简单的认为 wxml +wxss +js = html + css +js
    wxml 就是展现页面
    wxss 就是设置样式 (与 CSS 相比,WXSS 扩展的特性有:(1)尺寸单位 (2)样式导入 )
    js 还是处理逻辑和数据交互
    json 页面配置文件 (app.json为全局配置文件)
2018-05-03 18:42:39 Crimson1 阅读数 611
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序开发者工具的使用:登录自己的微信小程序页面,找到工具,下载微信开发者工具。下载好后,扫码登录自己的小程序。在登录的过程中,需要输入自己的小程序的appid。登录好之后就会显示这样的一个页面。


目录结构

从上图的右侧可以很清晰地看出来一个微信小程序的结构,一个微信小程序的页面包括四个文件:

a.“.js”后缀的是脚本文件,主要是写一些业务逻辑的代码,基本和JavaScript一样。(在开发过程中发现一些函数JS有而微信没有,毕竟这是微信自己的一套东西)。

b.“.json”后缀的是配置文件,例如tab的各种属性,实际中每个小页面的使用的并不多,涉及全局配置的app.json使用比较多,app.json中包括定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

c.“.wxml”后缀的是前端显示页面文件,你也可以把它理解为html页面,规则也和html5很类似,还是那句话,并不是完全一样,有些H5实现的东西wxml并不能实现。

d.“wxss”后缀的是样式表文件,类似于css。

以上是每个微信小程序页面的四种基本构成,微信开发者工具会根据这些,编译生成相应的小程序实例。


2019-08-26 17:58:58 weixin_43509051 阅读数 60
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序开发学习笔记

1. 登录认证

参考文章
小程序登录的一个重要角色就是微信的服务器。小程序的登陆流程时序图如下:

小程序登录流程

根据微信官方提供的登录流程时序图可以清楚的了解小程序登录需要以下的步骤:

  • 小程序启动,通过wx.login()获取临时登录凭证code,code必须是微信给的,而且是唯一的
  • 开发者服务器需要提供一个登录的接口,参数就是小程序获取的code
  • 登录接口收到code后,调用微信提供的auth.code2Session接口进行code的验证
  • 得到验证结果,成功后能得到一个用户唯一标识 OpenID 和 会话密钥 session_key
  • 生成一个自定义的key, 将session_key和openid跟自定义的key关联起来
  • 将自定义的key返回给小程序每次请求都带上key, 后端根据key获取openid识别当前用户身份

2. 数据交互

微信小程序页面通过微信提供的 wx.request() 发起HTTPS请求,具体可以见文档
示例代码:

wx.request({
  url: 'test.php', //这里填写接口地址
  data: {   //请求的参数,非必填项
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 可以在此修改header默认值
  },
  success (res) {
    console.log(res.data)       //res.data是开发者服务器返回的数据
  }})

有几点需要注意的地方:

  • 发送异步请求不再是WEB的Ajax,而是用微信封装好的方法 wx.request
  • 小程序不存在跨域的问题,不用处理跨域。(跨域是web浏览器才有的概念,因为web资源都是存在服务端,客户端去请求服务端域名下的地址可以获取到本地在浏览器中执行,代码运行过程中对另一个领域进行请求,才产生了跨域。小程序类似客户端,小程序的代码都放在了客户端本地,也就是手机上,所以不存在跨域的现象,可以随意请求)
  • 请求的地址必须在管理后台添加白名单
  • 域名必须备案,服务端必须采用HTTPS

3. 具体的界面开发

3.0.开发工具:微信开发者工具

下载并安装微信开发者工具,用微信扫码可以登录。在开发者工具中新建一个helloworld项目(APPID可以使用测试ID)。

3.1. 微信小程序应用配置

3.1.1 微信小程序的目录结构介绍

新建的微信小程序项目的目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       ├── logs.json
│       ├── logs.wxss
│       └── logs.js
└── utils
│       └── utils.js

微信小程序的结构图

3.1.2 微信小程序配置

微信小程序配置可以在全局的app.json中进行,也可以在每个页面目录下的json文件中进行。 具体配置见开发文档
1. app.json 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。如下

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "blue",
    "navigationBarTitleText": "helloworld",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

可以在这里修改一些全局的样式和内容,其中必须要有pages属性。
pages中的第一行目录会做为小程序打开后的第一个页面来呈现。"pages/index/index",的最后没有文件后缀名,在同一目录下有index.js index.wxml index.wxss三个文件。
index.wxml是基于XML的,与HTML的不同就是必须遵守严格的规范,标签必须成对出现,类似<image>的标签也必须为<image></image>或者<image/>
index.wxss是样式表文件,完全基于css语法,用来定义页面样式。有一个比CSS语法更高级的单位rpx
另外还可以有index.json文件,用以覆盖app.json文件中window对象中的样式。

小程序的根目录中的app.wxss中存放全局的样式。

2. page.json 页面配置
页面配置会覆盖掉app.json中window属性下相同属性的配置。

3. 标签栏配置
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

3.2. 微信小程序逻辑层与界面层分离架构

3.2.1 小程序的JS和浏览器中的JS的差别

  1. 微信小程序不是运行在浏览器中的,所以没有BOM和DOM对象。在app.js中打印windowdocument对象,结果都是undefined。
  2. 小程序的js有一些额外的成员:
    App方法:用于定义应用程序实例对象。
    Page方法:用于定义页面对象。一个小程序是由一个应用程序实例对象(App)和多个page对象组成的。
    getApp方法:用来获取全局应用程序对象。
    getCurrentPages方法:用来获取当前页面的调用栈。(数组,最后一个就是当前页面)
    wx对象:用来提供核心API。API文档
  3. 小程序的JS是支持CommonJS规范的,我们可以通过require的方式载入模块,可以通过export的方式导出模块成员。例如:可以在utils文件夹下建立一个foo.js文件,内容为:
function sayItAgain(){
  console.log("say, say it again");
}

//导出sayItAgain方法
module.exports = {
  say: sayItAgain
}

//commonJS中可以使用以下方法,但是在微信小程序中不支持exports.xxx这种方法
exports.say = {
}

在外侧的app.js中可以进行调用:

const foo = require('./utils/foo.js') //引入模块
foo.say() //调用方法

3.2.2 界面层的数据绑定

数据绑定的文档

  1. 数据在哪?
    小程序中规定,页面中的数据全部放在后台代码的data属性当中。data就是界面和逻辑之间的桥梁。

  2. 绑定到哪里去?
    想绑定到哪就在哪里使用mustache语法输出,也就是用{{ }}的方式输出

3.2.3 界面层的列表渲染

列表渲染的文档

使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

  1. 明确页面结构中的循环体(也就是循环的标签结构)。
  2. 删除多余的循环内容,只保留一个。
  3. 在剩下的这个循环体上面加上wx:for属性,属性值等于要遍历的数据源,数据源必须是一个数组。
  4. 在这个循环体(标签结构)内部使用item代表当前被遍历的元素。如果全局属性中有item关键词,就会出现冲突的情况,可以加上wx:for-item='xxx'修改本地属性的名字,给当前遍历的数据起个别名。加上wx:for-index可以给遍历的索引定义名称。

3.2.4 界面层的事件处理

微信小程序中的事件绑定方法:使用bind+事件名
写一个button,为它绑定一个事件,点击在控制台输出特定内容。在微信小程序里绑定事件的属性要使用bindtap,相当于浏览器中的onclick

<view class="container">
  <button bindtap="buttonTapHandler">tap</button>
</view>
Page({
  buttonTapHandler: function(e){
    console.log("-------clicked------")
    //dir是在控制台输出树形结构,便于查看
    console.dir(e)
  }
})

3.2.5 界面层的事件冒泡和处理

关于事件冒泡和事件冒泡在普通浏览器中的处理
JS中的事件冒泡和事件捕获

微信小程序中处理事件冒泡的方法:把bindtap改为catchtapcatch+事件名是阻止冒泡并且绑定事件。例子:

<view class="container">
  <view class="box1" bindtap="buttonTapHandler">
    <view class="box2" bindtap="buttonTapHandler"></view>
  </view>
  <view class="box1" catchtap="buttonTapHandler">
    <view class="box2" catchtap="buttonTapHandler"></view>
  </view>
</view>
.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2 {
  width: 50px;
  height: 50px;
  background-color: blue;
}
Page({
  buttonTapHandler: function(e){
    console.log("-------clicked------")
    console.dir(e)
  }
})

结果如图:
在这里插入图片描述

3.2.6 界面层的事件传参

普通情况下的事件传参,可以在事件处理函数中定义变量,将参数传入。在微信小程序开发中,这种方法无法使用。

<button bindtap="tapHandler(123)">点击</button>
tapHandler: function(num) {
    console.log(num)
 }

这样写会有如下报错:

Component "pages/index/index" does not have a method "tapHandler(123)" to handle event "tap".

说明此时把tapHandler(123)整体当成函数名,所以不能通过这种方式传参。

解决方法:使用data-+参数的形式来传递,在事件处理函数中用e.target.dataset取参数。

<button bindtap="tapHandler" data-msg="hello">点击</button>
tapHandler: function(e) {
    console.dir(e)
    console.log(e.target.dataset.msg)
}

输出结果:
输出结果
注意:事件处理函数中的this指向的是页面对象,和HTML中不同

3.2.7 单向数据流

  1. 从后台获取数据并且显示到界面上:
<input type="text" value="{{ msg }}"/>
<text> {{ msg }} </text>
Page({
  data: {
    msg: 'hello'
  }
})

这样就可以将后台的数据显示到界面上。但是这个过程只是单向的数据流,后台中的数据并不能随着输入内容的变化而变化,不能做到双向绑定。小程序中要做到数据双向绑定,需要借助事件对它进行进一步的操作:

<input type="text" value="{{ msg }}" bindinput="inputvalue"/>
<text> {{ msg }} </text>
Page({
  data: {
    msg: 'hello'
  },
  inputvalue: function(e){
    this.data.msg = e.detail.value
  }
})

以上程序在输入框中输入的时候,text中的数据并没有更改,也就是说并不能实现双向绑定。原因是因为小程序的单向数据渲染是一次行为,也就是一锤子买卖。在第一次建立绑定之后过程就停止了,不会监视数据的变化。如果想要同步的话,必须调用它内部的setData()方法。

<input type="text" value="{{ msg }}" bindinput="inputvalue"/>
<text> {{ msg }} </text>
Page({
  data: {
    msg: 'hello'
  },
  inputvalue: function(e){
    this.setData({
      msg: e.detail.value
    })
  }
})

这样在输入框中输入的时候,text中的数据发生更改,实现了双向绑定。setData()与直接赋值的区别在于setData()方法可以通知界面做出变化,而直接赋值没有办法实现这一点。
在这里插入图片描述

3.2.8 界面层的条件渲染

条件渲染文档
实例:使用vx:if控制显示隐藏

<view>
    <view class="box">
      <view class="title" bindtap="changeShow">点击切换状态</view>
      <block wx:if="{{ show }}">
        <view class="content">
          <view>11111111</view>
          <view>22222222</view>
          <view>11111111</view>
        </view>
      </block>
    </view>
  </view>
Page({
  data: {
    show: true,
  },
  //事件处理函数
 
  changeShow: function(){
    this.setData({
      show: !this.data.show
    })
  },
})

3.2.9 WXSS和CSS之间的差异

WXSS文档
最重要的一点就是rpx的使用。
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。也就是宽度正好占满屏幕宽的情况下为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

3.3. 微信小程序组件介绍和应用

详细见组件的文档介绍

语法问题

组件的使用是类似于HTML的方式(有不同),组件使用的严格的XML标准(开闭标签问题)

组件的分类

  • 功能性的组件
    • 用来完成具体功能
  • 布局类型的组件
    • 用来完成页面结构(DIV)
  • API 类型(使用的角度)
    • wx.showModal
    • 通过调用一个方法来使用

4. 微信小程序页面间跳转和传值

4.1 微信小程序页面间跳转

  • 微信小程序可以通过在app.json中设置pages属性,为属性添加目录信息,来快速为程序添加页面:
"pages": [
  "pages/demo1/demo1",
  "pages/demo2/demo2",
  "pages/demo3/demo3"
]

微信小程序的页面跳转可以使用navigator标签实现。

<navigator url="../demo2/demo2">
  <button>demo2</button>
</navigator>
<navigator url="../demo3/demo3">
  <button>demo3</button>
</navigator>

4.1 微信小程序页面间传值

  • 传统的web开发过程中页面间传值方式:在url中用?传参。把参数用?xxx=xxx的形式进行传递。
  • 在微信小程序当中,也可以进行类似的操作。
    微信小程序也和MVVM的框架一样,有生命周期函数的概念。
    微信小程序的声明周期函数中有onload监听页面加载的函数,有一个options参数,通过url传递的参数就被保存在这个参数之内。
    页面间的参数传递可以通过以下步骤进行:
  1. 传参:url中加上问号参数。
  2. 接收:生命周期onLoad事件中通过option参数接收。
//demo1.wxml中传递参数message和name
<navigator url="../demo2/demo2?message=hello&name=范德彪">
  <button>demo2</button>
</navigator>
//demo2.js中取出参数
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      message: options.message
    }) 
    this.setData({
      name: options.name
    }) 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})
//demo2.wxml中展示参数
<text>传递过来的参数是:{{ message }}</text>
<text>传递过来的姓名是:{{ name }}</text>

在这里插入图片描述
微信小程序页面跳转默认是可以返回上一页的。如果有一些只出现一次的页面(比如用户第一次登录的时候要同意用户协议,或者教用户如何使用的页面),我们就可以用以下的方式在navigator标签中加上redirect,这样就不会出现返回按钮。

<navigator url="../demo3/demo3" redirect>
  <button>demo3</button>
</navigator>

4.2 导航元素点击高亮

一般来说WEB开发中的导航元素都有点击后高亮的样式。navigator标签也专门为此提供了hover-class的属性,为指定点击时的样式类(当hover-class="none"时,没有点击态效果)

  • 小技巧:如果需要一个非导航元素点击后有高亮的样式,我们可以给它加一个cursor: pointer的样式,这样就能够使它在点击时能有高亮的效果。这样我们可以让任何一个元素都具有点击高亮的效果。但是这样也有缺点,就是高亮的效果我们无法进行控制,所以如果要控制点击效果的话还是要使用navigator标签。

4.3 通过API调用完成页面导航

微信小程序路由文档

可以通过调用wx.navigateTo,保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。wx.redirectTo关闭当前页面,跳转到应用内的某个页面,区别是这个API没有返回按钮。

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