zoukankan      html  css  js  c++  java
  • 微信小程序入门学习

    前(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/

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

                   

      

      

  • 相关阅读:
    623. Add One Row to Tree 将一行添加到树中
    771. Jewels and Stones 珠宝和石头
    216. Combination Sum III 组合总数三
    384. Shuffle an Array 随机播放一个数组
    382. Linked List Random Node 链接列表随机节点
    向github项目push代码后,Jenkins实现其自动构建
    centos下安装Jenkins
    python提取批量文件内的指定内容
    批处理实现:批量为文件添加注释
    python抓取每期双色球中奖号码,用于分析
  • 原文地址:https://www.cnblogs.com/imyjy/p/5906440.html
Copyright © 2011-2022 走看看