php小程序开发完整教程,php小程序开发完整教程下载 收藏 0

小程序开发流程与费用

QQ小程序研发服务费主要就有两方面：此基础服务费和研发服务费。这三项服务费也包含小程序研发整个程序。

一、小程序的此基础服务费

1、小程序的资格证书服务费

每个小程序都是需要登记注册一个账号，来管理小程序版的。QQ小程序账号在QQ社会公众平台上登记注册。账号的证照有个人或民营企业，建议采用民营企业的证照，职权会更多。小程序需要资格证书服务费300元，假如已资格证书好了的社会公众号则不需要。

2、小程序的ICANN服务费

小程序需要以登记的ICANN，也能是子ICANN。小程序对ICANN主要就就是用以做前台和USB的。ICANN的登记注册服务费在30元-80元之间，假如只是用以做小程序USB的ICANN，能选择一个产品价格最便宜的。

3、小程序的内部空间服务费

小程序的内部空间是放置资料库和前台的地方。内部空间有云伺服器或HostEase（支持SSL资格证书的），小程序财政预算高的，买云伺服器，产品价格在2千左右。财政预算低的，能考虑购买HostEase，采用也是一样的。

4、小程序的ssl服务费

SSL资格证书是传输加密算法。即在ICANN协议上http上瑙脂s。小程序要求必须要有，ssl能登记注册自助的，在阿里云能申请。较大型项目全然能采用自助的。订阅的ssl资格证书通常产品价格在300-2000元不等。

二、小程序的研发服务费

小程序研发服务费受研发商业模式负面影响较大，研发商业模式有定制研发和模板研发。定制研发是从头开始，用户界面和编码是全然创造出来。模板研发是指在一套已做好了的小程序此基础上，展开修正。这种就省却了许多此基础机能的研发。这两者的产品价格是相距很大的。

1、定制研发服务费

定制研发的小程序，需要先做蓝本图，略过交给ui结构设计，然后再研发小程序后端。小程序的内容是非常完善的。定制研发的小程序服务费主要就跟技能有关，技能越多，产品价格就越多越好。随着研发技术的发展，制作小程序也变得越来越容易。后端能采用原生植物或html5的语言，后端能采用php架构来研发。小程序的制作经济效益就提升了许多。因而产品价格也是相对较低的。

2、模板研发服务费

模板小程序不需要做整体的结构设计了，只需要修正下局部，在原本的技能此基础上，展开修正或嵌入。许多网络子公司都积累了大量的小程序编码，只需要对新项目展开交会，就能把写好的编码，直接用在新项目上。这种制作的时间和成本就降低了许多。因而在制作常规性小程序中，也是能还许多产品价格的。

除了上面介绍的负面影响小程序研发服务费之后，除了许多其它的不利因素，比如合作性质，是公司还是程序员开发。

武汉鸿链云科技有限公司是一家致力于为各个领域提供APP、小程序定制开发的高新技术企业，公司有技术研发200多人，从事互联网技术规划、研发10多年。针对教育、医疗、旅游、直播、分销等各种小程序、APP定制开发。

鸿链云集智能化解决办法、进行咨询、设计、研发、实施、营运、维护为多功能的“应用应用软件+网络+领域”研发专业领域机构。我们著眼于为用户提供更多业内专业领域、最前沿的技术积极支持，为企业营运提供更多服务平台解决办法。我们意在依照用户产品和工艺特点，运用最前沿的应用软件技术，订制最精确、安全、可靠的全程序智能化应用应用软件。立足“应用应用软件+网络+领域”进行自主创新，深度交流化成用户服务项目。

小程序开发教程学习（二）

八、小程序的API开发

1.wx.request使用：

a.概念：发起HTTPS网络请求

b.参数如下表所示：

c.示例代码如下：

wx.request({

url: \’test.php\’, //仅为示例，并非真实的接口地址

data: {

x: \’\’,

y: \’\’

},

header: {

\’content-type\’: \’application/json\’ // 默认值

},

success (res) {

console.log(res.data)

}

})

2.图片选择与微信拍照：

a.wx.chooseImage选择图片

概念： 从本地相册选择图片或使用相机拍照。

参数如下表：

示例代码如下：

wx.chooseImage({

count: 1,

sizeType: [\’original\’, \’compressed\’], //图片类型，原图和压缩图

sourceType: [\’album\’, \’camera\’], //图片来源，从相册选择还是拍照

success (res) {

// tempFilePath可以作为img标签的src属性显示图片

const tempFilePaths = res.tempFilePaths //返回选择的图片路径

}

})

3.文件的上传与下载：

a.文件上传wx.uploadFile：

概念：将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

参数：

示例代码：

wx.chooseImage({ //选择一张图片

success (res) {

const tempFilePaths = res.tempFilePaths //选择图片成功后的图片路径

wx.uploadFile({

url: \’https://example.weixin.qq.com/upload\’, //上传的服务器地址

filePath: tempFilePaths[0], //上传的文件为之前选择的图片

name: \’file\’, //文件名

formData: {

\’user\’: \’test\’

},

success (res){

const data = res.data //上传成功后做的操作

//do something

}

})

}

})

b.文件下载wx.downloadFile：

概念：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。

参数：

示例代码：

wx.downloadFile({

url: \’https://example.com/audio/123\’, //仅为示例，并非真实的资源

success (res) {

// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容

if (res.statusCode === 200) {

wx.playVoice({

filePath: res.tempFilePath

})

}

}

})

4.WebSocket：

a.什么是WebSocket

连接服务器，与服务器进行信息交互的API

b.使用WebSocket

1.连接服务器wx.connectSocket

示例代码：

wx.connectSocket({

url: \’wss://example.qq.com\’, //服务器地址，只有这个必填

data:{

x: \’\’,

y: \’\’

},

header:{

\’content-type\’: \’application/json\’

},

protocols: [\’protocol1\’],

method:\”GET\”

})

2.向服务器发送信息wx.sendSocketMessage

示例代码：

wx.sendSocketMessage({

data:msg

})

3.关闭连接wx.closeSocket

示例代码：

wx.closeSocket()

c.监听WebSocket

1.wx.onSocketMessage监听WebSocket接收到服务器消息的事件

2.wx.onSocketOpen监听WebSocket 连接打开事件

5.音乐的播放和控制：

a.wx.getBackgroundAudioManager() 获取全局唯一的背景音频管理器。

b.BackgroundAudioManager实例：

backgroundAudioManager.title = \’此时此刻\’ //音频标题（必填）

backgroundAudioManager.epname = \’此时此刻\’ //专辑名

backgroundAudioManager.singer = \’许巍\’ //歌手名

backgroundAudioManager.coverImgUrl = \’…url\’ //封面图URL

backgroundAudioManager.src = \’….url\’ //音乐URL

6.缓存数据：

a.wx.setStorage：将数据存储在本地缓存中指定的 key 中。数据存储上限为10MB

示例：

wx.setStorage({ //异步方式

key:\”key\”,

data:\”value\”

})

try {

wx.setStorageSync(\’key\’, \’value\’) //同步方式

} catch (e) { }

b.wx.removeStorage：从本地缓存中移除指定Key

示例：

wx.removeStorage({ //异步方式

key: \’key\’,

})

try {

wx.removeStorageSync(\’key\’) //同步方式

} catch (e) {

// Do something when catch error

}

c.wx.getStorage：从本地缓存中异步获取指定 key 的内容

wx.getStorageSync：同步版本

d.wx.getStorageInfo：异步获取当前storage的相关信息

wx.getStorageInfoSync：同步版本

e.wx.clearStorage：清理本地数据缓存

wx.clearStorageSync：同步版本

7.获取当前位置：

a.wx.openLocation：使用微信内置地图查看位置

b.wx.getLocation：获取当前的地理位置

c.wx.chooseLocation：打开地图选择位置

d.综合应用代码：

wx.getLocation({

type: \’gcj02\’, //返回可以用于wx.openLocation的经纬度

success (res) {

const latitude = res.latitude //获取经纬度

const longitude = res.longitude

wx.openLocation({ //根据获取的经纬度查看位置

latitude,

longitude,

scale: 28 //缩放比例

})

}

})

8.交互：

a.wx.showToast：显示消息提示框

示例：

wx.showToast({

title: \’成功\’, //提示内容

icon: \’success\’, //图标，有success和loading两种

duration: 2000 //提示的延迟时间

})

注意：wx.showLoading 和 wx.showToast 同时只能显示一个

wx.showToast 应与 wx.hideToast 配对使用

b.wx.showModal：显示模态对话框

示例：

wx.showModal({

title: \’提示\’, //提示的标题

content: \’这是一个模态弹窗\’, //提示的内容

success (res) {

if (res.confirm) {

console.log(\’用户点击确定\’)

} else if (res.cancel) {

console.log(\’用户点击取消\’)

}

}

})

c.wx.showActionSheet：显示操作菜单

示例：

wx.showActionSheet({

itemList: [\’A\’, \’B\’, \’C\’], //按钮的文字数组

success (res) {

console.log(res.tapIndex) //返回用户点击的按钮序号

},

fail (res) {

console.log(res.errMsg)

}

})

9.导航栏：

a.wx.setNavigationBarTitle：动态设置当前页面的标题

示例：

wx.setNavigationBarTitle({

title: \’当前页面\’

})

b.wx.showNavigationBarLoading：在当前页面显示导航条加载动画

c.wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画

d.wx.setNavigationBarColor：设置页面导航条颜色

示例：

wx.setNavigationBarColor({

frontColor: \’#ffffff\’, //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

backgroundColor: \’#ff0000\’, //背景颜色值，有效值为十六进制颜色

animation: { //动画效果

duration: 400, //动画变化时间

timingFunc: \’easeIn\’ //动画变化方式（以低速开始）

}

})

10.动画：

a.Animation wx.createAnimation(Object object)：创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

b.示例代码：

<view animation=\”{{animationData}}\” style=\”background:red;height:100rpx;width:100rpx\”></view>

Page({

data: {

animationData: {}

},

onShow: function(){

var animation = wx.createAnimation({ //创建动画示例

duration: 1000, //动画持续时间

timingFunction: \’ease\’, //动画以低速开始，然后加快，在结束前变慢

})

this.animation = animation

animation.scale(2,2).rotate(45).step() //动画样式，缩放的同时旋转45度，step表示一组动画完成

this.setData({

animationData:animation.export()

})

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com