欢迎来到本网站

全国统一咨询热线:158-2196-7367

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:158-2196-7367

邮箱:amy@hanett.com

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

当前位置:明翔网络 > 行业新闻 > 微信小程序平台怎么开发

微信小程序平台怎么开发

文章出处:http://www.ucunicom.com/a/1041.html 阅读量:1 发表时间:07-02 09:57
行业新闻

零基础入门微信小程序开发

课程介绍

本课程共包含四个部分。

课程内容

要火的节奏

最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

但如果你打开轻应用的文档可以发现两点:

什么是小程序?

最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

小程序相关技术介绍

使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。

使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。

使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。

架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

JSON

XML

XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript

JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

学习方法

参考资料

第02课:开发环境的准备

创建自己的小程序账号

因为是第一次使用,所以选择画面右上角的“立即注册”。

选择左下角的“小程序”方框。

输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

最后按下“注册”按钮。

点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

如果认证成功,画面会变成下面这个样子。

点击“继续”按钮。

意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

大功告成!

小程序管理平台

首页

内容比较简单,主要是表示小程序的实时访问次数和系统公告。

开发管理

过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

用户身份

这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

数据分析

模板消息

客服消息

通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

附近的小程序

运维中心

一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

推广

用来自定义小程序推广关键字。

设置

设置分类中一共有五个页面,这里只介绍前两个。

基本设置

顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

设定小程序名称,小程序头像;

取得小程序码;

取得认证;

设定主题信息;

其他省略。

开发设置

这个页面主要负责和小程序开发相关的设定信息,内容包括:

取得小程序 ID。每一个发布的小程序都需要唯一的 ID。

生成小程序秘钥。

指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。

其他省略。

其他

在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

安装开发工具

小程序账号申请成功之后的工作就是准备开发环境。

根据操作系统选择合适的下载链接。

下载完成后打开安装程序,首先是开始画面。

按下“下一步”按钮。

按下“我接受”按钮。

指定适当的安装目录后按下“安装”按钮。

安装中……

完成!

微信开放平台开发第三方授权登陆:微信小程序

目录

开发小程序需要在公众平台注册一个小程序账号,然后获取到小程序的AppID和AppSecret。就可以进行第三方登陆授权开发。

一、需求

二、开发流程

小程序:

(服务端),并且带上授权临时票据code参数;

2. 服务端通过code和appid、APPSecret获取到openid和SessionKey。服务端需要返回自定义登录态给前端,不能返回SessionKey

3. 前端保存自定义登录态,获取用户信息时携带自定义登录态给后端。

获取Token的流程

三、开发使用的技术及工具

1、.后端采用IDEA2017 进行开发

3、使用fastJson对json数据进行处理

1.前端(小程序)

目录结构如下:

1)自定义的全局变量

globalData: {

userInfo: null,

sessionkey:null

}

自定义userInfo用于存储用户信息

sessionKey用于存储服务端发回给客户端的sessionkey

2)index加载时进行登录

onLoad: function() {

var serverUrl = ;

// 加载时,检查当前用户信息是否登录

if ( != null) { // 已经登录了

// 是否授权

success: function(res) {

if (['']) {

// 已经授权,可以直接调用 getUserInfo 获取头像昵称

success: function(res) {

= ();

}

})

} else {

// 还没有授权,则需要授权

url: ''

})

}

}

})

} else { // 还没有登录

// 提示用户登录授权

// 发送 到后台换取 openId, sessionKey, unionId

if () {

// 发送请求,服务端能获取到openid和unionid,之前登录过则可以获取到之前的用户信息。

url: serverUrl + '/miniprogram/login/' + , //请求路径

method: "GET",

success: function(res) {

= ;

// 进入授权

url: ''

})

}

})

}

}

})

}

},

登录成功后,重定向到授权页面

Button的open-type为getUserInfo时,点击后会调用bindgetuserinfo属性配置的函数,同时带上用户基本信息(不包括Openid等)

4)用户信息发送给后端

// 授权登录按钮

bindGetUserInfo: function(e) {

let that = this;

var serverUrl = ;

()

if () {  // 成功获取到信息

=

// 这里可以将用户信息发送给后台

// 获取到sessionkey

if (!=null){

url: serverUrl + '/miniprogram/userinfo', //请求路径,

method: "GET",

data: {

// openid: ,

// unionid: ,

key: ,

nickname: , //获取昵称

gender: , //获取性别

province: , //获取省份

city: , //获取城市

country: , //获取国家

avatarUrl: , //这些是用户的基本信息

language:

},

success: function (res) {

if ( == 0) {  // 请求成功

debugger

= ; // 以数据库中返回的数据为准

// 获取用户信息成功

url: ''

})

}

}

})

}else{

('错误:SessionKey为null');

}

} else {

}

},

}));

获取用户信息成功后,页面跳转到mine中显示用户详情信息

2.服务端(Java)

接受小程序发送过来的key和用户基本信息,根据key从redis中获取openid,然后对数据库进行查询,若存在数据则封装后返回给前端,若无信息则向数据库中插入数据并返回给前端。

1).配置文件新增小程序相关配置

=

=

2)获取openid以及Sessionkey

@ResponseBody

@RequestMapping("/login/{code}")

public String login(@PathVariable("code") String code) {

"appid=" +

("") +

"&secret=" +

("") +

"&js_code=" +

code +

"&grant_type=authorization_code";

// 请求,获取openid或unionid

// 从数据库中查询是否存储

// 成功获取

String unionid = (String) ("unionid");

String openid = (String) ("openid");//用户唯一标识

// 会话密钥session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。

String session_key = (String) ("session_key");

String key = "wechatminiprogramkey-" + ().toString().replaceAll("-", "");

(key, openid + "---" + session_key, 9600);

return key;

}

3).获取用户信息:

小程序能够获取用户基本信息,但是不包括openid等信息,仅有基本的昵称等信息,需要通过后端传输的key作为标识发送到前端,然后找到对应的openid来获取。

@ResponseBody

@RequestMapping(value = "/userinfo", method = ) // 获取用户信息

public Result getOpenId(String key, MiniProgramBaseUserInfo miniProgramBaseUserInfo) {

MiniProgramBaseUserInfo result = null;

String value = (key);

if (value != null) {

String values[] = ("---");

String openid = values[0];

// 从数据库中查询是否存储(根据openid查询)

result = null; // TODO: 这里是查数据库操作

if (result == null){ // 数据库中没有数据

// TODO: 向数据库中执行插入操作

// insert  weChatUserInfo

result = miniProgramBaseUserInfo;

}

return (result);

return (SESSION_KEY_OVER_TIME); // SessionKey失效

}

如何从零开始开发微信小程序

公众平台页面

小程序注册页面

注册过程中可以选个人开发者,个人开发小程序是免费的,企业级小程序开发需要300元的认证费用。最后只要上传下个人的身份证相片就可以了。

demo小程序

微信小程序云开发使用方法新手初体验

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。(就是说以后老板让你做小程序,连个后台的人都不用给你配了,自己搞定就行了)。

目前提供三大基础能力支持:

数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

说白了就是,云函数就是后端代码,现在叫云函数,自己写,自己上传,数据库没什么好说的,就是数据库,不过这个数据库是json数据库,很方便,怎么个方便法呢,看下图:

传统数据库以mysql为例子:

看到int..这么多类型是不是很烦躁,取的时候再合并多个表也很麻烦

小程序云json数据库:

看到这些类型是不是很亲切,大大降低了新手对数据库理解,不用学黑窗口,sql命令,还可以导入josn数据,很是方便。

现在走一遍流程:

1、创建带小程序云模板的小程序:

2.看到这么多是不是有点方  - -!,看到多了一个东西,点击创建自己的环境,,具体就是写个名字,创个一个环境,官方上说是最好创建俩个环境,一个是开发环境,一个是线上环境。

不做赘述,都是免费的,

3.选择环境,环境创建好了,不过还没有使用上

对第一个文件夹点右键,选择你要使用的环境,下面则是你的云函数,就是跑在服务器上的。

4.先别急上传个login是怎么使用的,我们先去看点击获取openid是事件,发现,这里只有个name对应上上传的云函数事件名,而云函数直接就返回了openid,看看云函数是怎么实现的

name: 'login',

data: {},

('[云函数] [login] user openid: ', )

=

url: '',

})

},

('[云函数] [login] 调用失败', err)

url: '',

})

}

})

// 云函数模板

// 部署:在 cloud-functions/login 文件夹右击选择 “上传并部署”

/**

* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端

*

* event 参数包含

* - 小程序端调用传入的 data

*

*/

(event)

(context)

// 可执行其他自定义逻辑

// 的内容可以在云开发云函数调用日志查看

return {

openid: ,

}

}

5.关于数据库,数据库那边每一个表都有权限设置,好好看一下。

创建很简单,读取也很简单,很像slq语句。

('todos').where({

_id: 'W5c0IDWesyZkco4t'

({

dataList:

})

})

感觉还可以继续完善,使用起来感觉很好,把一切变的简单。

教你如何作为第三方平台开发微信小程序详解

一、总体流程

第三方平台帮助旗下已授权的小程序进行代码管理时,需先开发完成小程序模版,再将小程序模版部署到旗下小程序帐号中,具体流程如下:

1:绑定开发小程序

注意:绑定为开发小程序后,该小程序的在开发工具中上传,代码会直接上传到开放平台,不会上传到公众平台。

2:小程序模版的开发和上传

3:添加到小程序模版库,获得模版ID

从开发者工具中上传的代码,会先存在草稿箱中,每个开发小程序只保留最新一份上传记录。开发者可将草稿箱中的代码添加到小程序模版库中,小程序模版库中的模版不会被覆盖。最多可以有五十个代码模版,添加后可以获得模版ID(TemplateID)。

4:调用接口,为旗下授权的小程序部署代码

详细文档见代码管理。

二、如何开发

1、创建项目

与开发普通小程序一致,第三方平台开发者填入相关的 3rdMiniProgramAppid ,设定项目名称和选择项目目录即可创建项目。

对于第三方平台小程序,可以在项目页卡查看到相关的 open3rd 信息以及当前的第三方的 3rdMiniProgramAppid ,如若项目配置了相关的 extAppid ,那么项目页卡中也会有相关信息。

2、小程序模板开发

有所不同的是,第三方平台小程序的提交上传是上传至该第三方平台的 open 帐号下的模板草稿箱中,该平台的管理员需要自行对该模板进行相应的设置,更多请参考open平台的文档。

3、extAppid 的开发调试

为了方便第三方平台的开发者引入 extAppid 的开发调试工作,需要引入的概念。

是一个配置文件,放置在小程序项目的根目录下。

中的配置字段分为两种

特有的字段

同相同的字段

2,域名配置修改

3,测试帐号修改

4,提交审核、发布版本

微信小程序开发者工具详解

下载后安装一下就可以使用了:

二、创建项目

已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。

AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:

三、开发工具界面介绍:

2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

3. 项目:在这里可以上传或者预览项目

4. 编译:就相当于运行项目的意思

5. 关闭:关闭当前工程

7. 这个区域可以看到整个项目的文档目录结构

8. 这个区域是编码区

9. 这里是选择屏幕尺寸的地方

10. 模拟网络环境:2G/3G/4G/WiFi

四、调试区六大工具介绍:

在调试区开发工具提供了6种调试模式:

Console

Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。

Sources

Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。

Network

Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。

Storage

AppData

AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。

开发一个微信小程序需要多少钱?

如下图所示

举例来说:

好,明白了就开始下面的介绍。

小程序为什么还要用到网址呢?

我们平时浏览一些小程序,看到的商品图片,那其实是通过小程序的后台上传上去的,怎么上传呢?所有的小程序后台都是在电脑端的浏览器打开的,需要一个网址。所以小程序必须要用到网址。

费用呢?

这个也就是我们说的域名证书,目前阿里云官方最便宜的是1000多。

服务器主要是用于存储小程序里面的商品图片,小程序的源代码文件,以及数据库的。

除了存储之外,还会影响到我们的小程序打开速度。

你会发现,有的小程序速度很快,有的很慢,一般慢的原因主要是服务器的配置和带宽。

当然,前期如果没有多少用户,可以买个配置低一些的,后期有用户了,再不断升级。

那这些短信都是要自己购买收费的。有预算的话,可以用,毕竟用户体验好一些。没预算也可以不用。

前期大概花费2000元即可。

以上就是一般小程序商城的配套组成部分以及相关费用。

二、小程序商城的开发费用

小程序开发费用主要是根据您想要的小程序需要哪些功能来定的。

通俗点理解,就是你家里装修,想要怎么装,砸墙,吊顶,油漆,木工打家具等等,装修公司根据你需要做哪些然后最终评估计算一个价格,那小程序商城开发也是同理。

下面老张结合大多朋友的需求,整理归纳了常见电商小程序的必备功能。

如下图所示

//这里主要介绍的是小程序电商的一些功能清单,其实小程序不仅仅可以做电商,也可以做其他平台

以上就是大多电商小程序的功能清单。

其他不多介绍,重点介绍下营销功能吧。

优惠券是一个用户很好体验的功能。比如说,我们给每个新用户赠送一张10元的优惠券,然后新用户下单只需要满元就可使用。目的就是让用户体验一次我们的购物环节;

这个就是类似拼多多的一种购物营销。我们可以找一些爆款做拼团,设置2人团,3人团,不赚钱,但可以引流;设置的时候,尽可能的有些价格区分。

可以根据自己的库存情况,设置一些限时促销。

直接举例说明二级分销的概念吧。用户A介绍B,B购买商品给A有一些返利;B介绍C,C购买给B有一些返利,同时给A也有一些返利;C介绍D,给B和C有返利,不再给A了。

一般来说,建议使用积分来计算。因为大多朋友卖的商品都是常见商品,利润较低,所以用积分兑换比较好。

兑换的可以是实物礼品,也可以是代金券购买商品可以抵扣,也可以是现金,直接提现;

有其他问题,可以留言或与我交流!

全国咨询热线:158-2196-7367

二维码

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

cache
Processed in 0.004424 Second.