小程序总的来说就是一个可以实现之前只能是原生态APP可以实现的效果和功能。比如说,一些酷炫的页面与转场,一些可以直接和手机硬件交互的功能,录音、拍视频、调用手机的重力感应、GPS等等。微信本身就是个超级APP平台,接入小程序后,就是个应用分发平台了。说到如何入门,我觉得看人来的,今天我们着重以两个角度来阐述。

一、开发者角度

二、零基础或者基础不牢的制作者角度

如果你是开发者那么你起码了解以下几点:

具备基本的前端基础:基本的css&&js&&html

工具: 微信开发者工具。建议升级到最新的

下载地址:微信开发者工具

下载ok后,到微信公众平台申请微信小程序appid,绑定个人小程序应用,使用微信开发者工具创建新项目, 输入申请的appid。进入就可以写代码了。


服务器:阿里云

是不是具备以上这些,就可以顺利开发了 ? no,小程序自己集成了一套框架。html和js基本不可以直接用。 所以呢,你还是需要学习下小程序的基本组件。组件的学习,如果有前端基础,其实非常简单。基本几个小时就 可以开发了。

小程序前端总结

要入门小程序,对于小程序的项目结构、基本的组件、基本事件、数据绑定交互、初始化过程等等应该比较清晰。

由于篇幅有限,主要讲下项目结构和数据交互,对于别的方面大家有兴趣,随时欢迎交流。

◆项目结构:

1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量、建立一些登录和获取用户信息的全局方法,进行本地数据的读写存储。app.js中我们使用App()注册小程序的,它接受一个object对象作为它的参数,这个参数指定了小程序的生命周期函数。

2、app.json是对整个小程序的全局配置。在这个文件中我们可以注册每个页面,设定小程序窗口的背景颜色和导航文字,设置小程序的tab分页等。


3、app.wxss是整个小程序的公共样式表。它是全局的,页面里的元素也都可以直接使用该文件里的样式规则。

4、Pages文件夹里放置着各个页面的文件夹,utils里是一个通用工具类方法文件夹。

◆基本属性

data:
页面初始化数据; –> 对象 : 页面加载时触发; –> 函数 onReady: 页面初次渲染完成; –> 函数
onLaunch: 在小程序初始化完成后触发; –> 函数 onShow: 在小程序从后台进入前台时触发; –> 函数
onHide:小程序由前台进入后台时触发; –> 函数 onUnload: 页面卸载时; –> 函数
onPullDownRefreash: 页面下拉时; –>函数

注意:
onLaunch()函数在整个小程序的生命周期只调用一次,其他两个函数调用多次。 ()函数在页面加载时只调用一次。
可以获取上个页面传来的参数,默认保存在data参数中,可以通过data.param的方式获取。
onUnload()页面卸载时调用,比如调用redirectTo或者navigateBack时。
App()函数只能定义一次,并且只能在app.js中定义。

◆数据绑定

微信小程序中的数据可以直接挂在到data对象中去

比如:


上面我们在data对象中定义了两个数据,一个数据定义在data对象中,另一个数据直接定义Page的参数中,这样我们可以以双大括号()方式将data中的数据渲染到页面。

◆数据获取和更改

对于data中的数据,我们必须通过this.data.buttoncontent这种方式来获取,对于data外面的数据,我们可以通过this.bgcolor的方式来获取。


对于data中的数据,要想改变它的值,必须要调用setData()方法来改变,而要改变data外的数据,可以直接给他进行赋值。


注意:
在函数中注意this的作用域。在map函数或者异步回调函数中要使用this,要在函数外先把this赋值给that,然后用that进行操作。
setData()对象参数的值不能为undefined。每次setData进行赋值时都要对要赋的值进行非空判断,确保不是undefined,否则会报错。

◆列表渲染:

列表循环使用wx:for来绑定一个数组,就可以将数组中的每个数据循环遍历到组件中。默认情况下每个元素的变量名为item,每个变量的索引值为index。


在列表遍历时我们并没有定义item和index,小程序自动为我们添加了wx:for-index=”index”和wx:for-item=”item”。因此在嵌套列表渲染时,注意index和item所代表的值和对象。需要我们自己定义变量名和索引,避免混乱。

还有条件渲染等,这里就不一一列举了,大家可以参考微信小程序框架学习;

mp.weixin.qq.com/debug/

服务器配置

如果本地调试的话,小程序访问后端api也是让人头疼。主要是服务器的搭建,稍后给出搭建方法。 原因是我们小程序所有后端api请求都要经过腾讯服务器,所以本地调试的话,必须要使用内网穿透,使 外网能够访问内网数据。开始时候想到的解决方案,简单步骤如下

◆增加一条虚拟主机转发规则,添加外网端口,指向内网应用ip地址以及应用端口。


tips:
测试外网转发规则是否添加成功: 查看路由运行状态,查看路由ip,因为在公司开发,
直接使用vpn.brilliant-solution.com:外网端口形式访问也可以,
浏览器中输入vpn.brilliant-solution.com:外网端口, 看访问是否会进入内网应用程序。成功进入代表转发成功。

申请域名,这里我是在阿里云上因为涉及到端口号,所以添加的dns解析,记录类型为显性url。


比如申请的域名为: catering.bdachina.net.这时候浏览器输入catering.bdachina.net,应该就可以访问后端 应用的。

问题来了。发现在公司连接公司网络,是无法访问路由地址vpn.brilliant-solution。内心仿佛万”马”奔腾。

看来还是需要换种途径,使用内网穿透工具,比如ngrok,花生壳等,我这里使用花生壳,具体可以看下花生壳免费域名申请方法。

最后,还要在微信公众平台绑定下域名,就可以本地开发调试了,这样就完成啦~


以上说的是第一种有一定基础的开发人员,如果你是第二种属于经验不足甚至没有经验的同学是不是就不能制作微信小程序了呢?NO!其实我们还有其他的方法让你体验制作小程序的乐趣。

如果你是零基础或者是基础不牢的制作者那么我们这边推荐您使用第三方开发者工具平台

以下我们以第三方开发者工具制作平台牛刀云举例


其平台产品三大特色就是组装式制作,开源式体验,一站式的便捷,因其产品功能丰富,所以你前期需要搭配教学视频助你了解平台工具使用,你不要小觑了这个帮助视频。据牛刀资深技术人员说如果你能完全理解所有帮助视频那么你理论上你能制作任何微信小程序,平台功能之强大,帮助视频之详细程度可见一斑。


而其操作台也让人眼前一亮,风格颇为简约,但是仔细一看却不简单。首先页面布局十分合理,各个功能搭配也显得相得益彰,让人用起来有种很自然不突兀的感觉,想找那个功能基本都随时找到。


介绍到这大家应该对小程序入门有一定的了解了吧。

如果您还有任何问题,都可以添加我的微信WG34437或者是私信我。

文章来源于互联网:如何入门微信小程序开发,有哪些学习资料?

发表评论