微信小程序的介绍和准备

2019年05月13日 标签: 微信小程序 小程序开发 小程序

什么是小程序
微信之父张小龙是这样描述的:
小程序是一种不需要下载安装就可以使用的应用,它实现了应用触手可及的梦想。

用户扫一扫或者搜一下即可打开应用,也体现了用完即走的理念
用户不用关心是否安装太多应用的问题:
应用将无处不在,随时可用,但又无需安装卸载。




应用:

1.适用多种营销场景:网上开店、数码家电、门店引流、营销活动、在线预约、外卖配送等。

2.适用多行业:食品快消、数码家电、母婴亲子、美妆护肤、教育培训、日用百货、水果生鲜、餐饮外卖、蛋糕烘焙、美容美发、休闲娱乐、酒店旅游等。

优点:

1.开发难度低,难度不及App,能够满足简单的基础应用,适合生活服务类线下店铺及非刚需低频应用的转换。

2.同步订单,跟微商城或零售店铺打通,无需额外运营成本,轻松管理。

3.自带流量,微信9亿月活跃用户,附近的小程序、微信搜索等功能,让你轻松获取流量,抓住客户。

4.可以尝试优惠券/码、满减/送、多人拼团等多种营销玩法,抓住流量,获取销量。

5.可以调用比H5更多的手机系统功能进行开发,例如GPS定位、录音、拍视频、重力感应等,能开发更丰富的使用场景。

6.打开速度比普通H5快,接近原生App。

7.在安卓手机上可以添加到手机桌面,看上去跟原生App差不多,但仅限安卓手机,iphone就不行了。

8.运行速度跟App差不多,也能做出很多H5做不到的功能,开发成本跟H5差不多,相对来说开发成本比App要低。

缺点:

1.只有1M的大小,导致无法开发大型的小程序,所以目前很多小程序很小、很简单。

2.小程序的技术框架还不稳定,开发方法时常有修改,导致短时间内经常要升级维护。

3.不能跳转外链网址,间接影响了小程序的开放性。

4.不能直接分享到朋友圈。

5.需要像App一样审核上架,比H5即做即发布要麻烦。

准备工作
1.注册账号 (mp.weixin.qq.com
2.激活邮箱
3.信息登记
4.登录小程序管理后台(不完善好信息是无法发布小程序的)
5.完善小程序信息,绑定开发者(尤其是团队多人开发)






在官网下载安装开发工具




安装完成后就可以登录:
微信扫码登录开发者工具,这里选小程序项目进入小程序本地项目进行管理




新建一个项目:

目录自选本地文件夹,AppID就是登录微信开发平台后的设置里能看到的AppID

如果没有ID也可以使用官方的测试号,但这样只能做做简单的本地测试,最后是填上适合的项目名称。




上手第一个小程序新建项目

选择一个空目录,使用普通快速启动模板
然后就可以看到预设的模板和内容了,可以直接查看或者点击编译在手机上扫一扫查看




接下来了解一下小程序的目录结构

pages
index
index.js 页面脚本逻辑文件
index.wxml 页面模板文件
index.wxss 页面样式文件
index.json 单个页面的配置信息,比如头部底色,头部title等

utils
app.js 全局逻辑
app.json 全局配置信息,包含了小程序的所有页面路径,界面表现,底部tab等基本信息
app.wxss 设置样式
project.config.json 开发工具的配置信息


小程序的启动过程:

打开小程序之前,微信会把小程序的代码包下到本地
然后通过app.json的pages字段知道当前小程序的所有页面路径,写在pages字段的第一个页面就是小程序的首页。

然后微信就把首页代码装载进来,渲染出首页。

然后app.js里App的实例onLaunch回调就会执行来一段简单的实战,为项目增加一个city选择页:
首先添加一个新的页面

1.在pages文件添加新页面文件




2.为city.wxml模板页面添加选择器:




picker是一个类似于select的picker组件
bindchange是用于绑定一个change事件的方法
value的值是一个序列号
range则是表示这个选择器的取值范围


3.然后在city.js中书写页面逻辑:




Page({})是页面的一个实例
data中的数据用于视图绑定
bindPickerChange则是绑定的change事件的函数名

可以看到,data中的数据可以在页面中被直接绑定使用
在js代码中想要改变data的值也非常简单,使用this.setData就可以了
这里我们传入了一个index序列号,也就是picker选择器选择了country数组中的元素。

通过这样的方法,就可以为页面添加不同的组件。


4.选择之后如果想要将选中的city的值传到其他页面比如首页

那么一般来讲有3种方法:

第一种是将数据存到全局的data中,也就是app.js的data中,这样所有的页面都能取到这些数据。
但我们并不推荐这样的用法,就如同我们不推荐使用全局变量都一样。

第二种是将数据带在url路径后作为参数传导:
local.com/foo?
这样的做法在传输复杂数据的时候并不是太合适。

第三种则是使用本地存储,在需要的页面再将其取出就可以了:
// 存储
wx.setStorageSync('city', {});
// 取出
wx.getStorageSync('city');


这样就完成了我们的第一个上手小页面的开发



» 本文链接地址:https://www.ccxcn.com/marketing/4255.html » 转载请注明出处,谢谢。