• 微信小程序入门学习


    前(che)言(dan):

      近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋友呢,给我提供了大量的闲暇时光,对此我只想说:呵呵!。现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,这时候不学什么时候学?万一成为大牛了呢?万一有哪个妹子看上我了呢?想想还有点小激动呢。。。

    正文:

      1.什么是微信小程序?

        简单的说很像 H5,它将 应用(功能与app相当) 嵌入到微信公众号中,用户无需安装应用,就能访问。相比app轻便了许多。

      2.开发者学习

        既然我们是程序员,乱七八糟的言论就不说了,像“这个东西以后会不会火啊?会不会取代app啊?好不好用啊?能不能找到女朋友啊?”这些问题,我只想说:除了最后一个问题,其他的管我吊事?好的!bb完了直接过来,干正事,代码看起来

        

        1.首先,我们需要下载安装 微信Web开发者工具,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

        2.打开开发者工具后,扫码进去创建项目,普通用户是没有appid(这里的appid不是普通公众号的appid)的,选择没有appid就好了然后输入项目名称比如:HelloWorld,选择项目保存地址的时候选择一个新创建的空文件夹,并且勾选 quick start, 它就会帮我们创建一个简易的小程序demo,方便我们学习理解

        3.进入我们的项目以后,我们看到了一个简单的demo页面,在左边菜单栏中选择“编辑”,可以查看我们这个项目的文件和结构,从文件结构中我们可以看到他的文件类型无非 4种:

          .js : 这就是一个javascript文件,只不过它是微信基于javascript封装过的,所以很多js函数是不能使用的,比如localhost.href,微信加入了很多自身的接口,比如跳转页面是: wx.navigationTo()函数

          .json : 配置文件,可以配置页面头部title信息等

          .wxml : 视图结构文件,功能就像html文件差不多,用于描述页面结构,只不过它有自己独特的标签,不使用html标签

          .wxss : 视图样式文件,格式跟css文件一样,他在css的基础上扩展了几个特性 比如:尺寸单位 / 样式导入

        4.这时候我们在项目文件夹下看到了三个特别的文件app.js、app.json、app.wxss,你还别说,这三个文件是一个项目必不可少的文件,删除任意一个文件项目都会崩掉,它们都是干吗用的呢?

          app.js: 小程序逻辑,里面用了一个App()函数来注册一个小程序,他有一个object类型的自定义参数,普通页面的js文件中可以通过 getApp()函数拿到App()函数所拥有的参数,并调用其中的数据

          app.json: 这里是项目的全局配置 比如 每一个页面(一个页面包括四个部分[js、json、wxml、wxss])都要在 pages数组中声明不然是访问不到的, windows对象中可以设置窗口的样式

          app.wxss: 这里是一个全局的样式文件,会对项目的每个页面其作用,就如一个全局的css文件

        5: 项目运行过程:

          第一步:加载项目根目录下的 app.js、 app.json、 app.wxss文件,同时会执行app.js文件,并触发其中的onLaunch 和 onShow 函数

          第二步:加载app.json中pages数组中配置的第一个页面,作为项目的欢迎页,同时会执行对应页面js文件,并触发 onLoad / onReady 和 onShow 函数

          往后:页面可以通过事件与js文件交互,比如 在标签元素上绑定点击事件,并且指向js文件中的一个函数,就能用js中的逻辑去处理这个事件了

         

        6:几个小问题: 

          第一个问题:他这个东西没有初始访问路径,不科学啊,为什么他一运行就给我进到index.wxml页面了呢?

            答:那是因为我们在配置 app.json的时候,在pages数组中声明了所有页面,而它运行的时候就会默认打开第一个页面,简单粗暴,谁排第一谁就是爸爸!

          第二个问题:他这个index.wxml文件中没有引入index.js、index.wxss和index.json,他是如何调用到它们呢?

            答:我们可以理解为 index 页面被拆分成了四个后缀不同的文件,但事实上他们是一体的,嘻嘻,这种关联方式莫名的很爽  (index页面 = index.js + index.json + index.wxml + index.wxss  , 其中wxss和json文件在没必要时可以没有)

          第三个问题:虽然我知道了他们四个文件是互通的,但是我在index.wxml里要如何调用index.js中的数据和函数呢??

            答:index.js中需要调用一个 Page()函数来注册一个页面,他有一个object类型的参数,其中有一个data对象,比如 Page({data:{key:'hello'}}),这样我们在页面中就可以直接使用{{key}} 双大括号来指向这个变量了,而且是同步的哟,js文件中data值变化后,页面中调用他的值也会跟着变。如果要调用的是个function对象的话,那我们就需要通过事件来调用了,比如页面加载事件,他会去js中找onLoad函数,这个他是自动的,如果我们想在我们点击了某个元素后调用一个函数处理相应逻辑,那么我们需要在元素标签中添加 属性了 比如 <view bindtap="myTapEvent">按钮</view>  ,当我点击了“按钮”文字后, 他就能调用到 js > Page()参数 > myTapEvent函数。

    最后我还是把微信 官方的文档放在这里, 大家可以直接看文档,现在初期内容不多,赶紧学起来

    https://mp.weixin.qq.com/debug/wxadoc/dev/

    好吧。初级的入门学习算是结束啦,之后会写一些更加深入的学习内容。 ^ ^

                   

      

      

  • 相关阅读:
    Java并发编程:synchronized
    对一致性Hash算法,Java代码实现的深入研究
    在Xcode中使用Git进行源码版本控制
    这些 Git 技能够你用一年了
    简明 Git 命令速查表
    Git 分支管理是一门艺术
    2016年Web前端面试题目汇总
    iOS 面试基础题目
    Json数据交互格式介绍和比较
    SpringBoot端口和访问路径
  • 原文地址:https://www.cnblogs.com/imyjy/p/5906440.html
Copyright © 2020-2023  润新知