同乐儿

  1. 首页
  2. 微信小程序
微信小程序开发:实践始终比想象容易
发布 | 4个月前 (11-21) | 阅读数:577 | 评论数:0 | 来源:同乐儿

微信小程序已经出来很长时间了,很久之前就想鼓捣小程序,当初认为所有程序都类似,写起来应该很容易,但等看完微信小程序的开发文档,看上去跟平常的代码完全不同,微信小程序有着一套独立的架构,随后,每当一看到小程序文档那些英文字母就头大,过不了几秒钟就放弃了,然后一直认为学起来很费劲。就在偶然的一次机会,实践了一小下,发现并没有想象的那么难。

一、初入微信小程序,认识它的外貌

相信当你决定开发微信小程序后,微信开发者工具肯定已经下载好了,但新建项目之后可能会发现自动建立的那些文件,跟平常不一样,看里边的代码也不一样,就有可能会有放弃的念头,但实际上大可不必,你可以建立一个最简单的项目,实际项目的根目录只会包含1个文件(project.config.json),而该文件中的内容可以不用管。刚开始先来看一个简单的目录结构图。

/tmp/phpa5tGo3

二、进阶

由上图可知,一般分为4种类型的文件,json可以认为是配置文件,wxml可以认为是类似html的模板文件,wxss看样子也可以当作是css文件,js文件不用多说也可以知道是存放js脚本的文件。

这里主要需要先配置一下根目录的app.json文件,它决定了页面结构和页面标题等相关属性,下面单独把代码拿出来自己就以轻而易举的了解到了。

  1. {
  2.   “pages”: [
  3.     “pages/index/index”
  4.   ],
  5.   “window”: {
  6.     “navigationBarTextStyle”“black”,
  7.     “navigationBarTitleText”“小程序标题”,
  8.     “navigationBarBackgroundColor”“#fbf9fe”,
  9.     “backgroundColor”“#fbf9fe”
  10.   },
  11.   “debug”true
  12. }

三、WXML解析

在上一步当保存之后就会发现项目多出来了pages/index/这样的目录结构,这是因为app.json中的配置的原因,其中index.js、index.json、index.wxml、index.wxss是一套,都以index命名,其中.wxml文件上面也说过了实际就是个html模板文件,主要用来编写页面布局的,而编写布局的代码,可以在微信小程序官方文档中找到,当然,如果想省事,可以直接百度搜索关键词“微信小程序+空格+任意想搜索的关键词”即可。这里最主要的标签就属<view>了,刚开始你可以只写一个<view>Hello World!</view>用来测试。

四、WXSS解析

index.wxss文件其实刚开始也用不到,完全可以在上一步中index.wxml的view中添加style属性进行添加css样式即可。

五、JS解析

接下来就是index.js文件了,而要想做出比较好的微信小程序出来,最主要的还是js的编写,而这里的js代码和一般web中的js代码略有不同,其js语法可以在微信小程序官方文档中找到,同样可百度。

这里主要举例出类似ajax的网络请求的语法结构的写法:

  1. Page({
  2.   /**
  3.    * 页面的初始数据
  4.    */
  5.   data: {
  6.     indicatorDots: true,
  7.     autoplay: true,
  8.     interval: 5000,
  9.     duration: 1000,
  10.     list: []
  11.   },
  12.   /**
  13.    * 生命周期函数–监听页面加载
  14.    */
  15.   onLoad: function (options) {
  16.     var that = this;
  17.     wx.request({
  18.       url: CONFIG.dev.api.url,
  19.       method: ‘POST’,
  20.       data: {
  21.         page: 0,
  22.         cid: 12
  23.       },
  24.       datatype:”json”,
  25.       header: {
  26.         “Content-Type”: “application/x-www-form-urlencoded”
  27.       },
  28.       success: function (res) {
  29.         console.log(res);
  30.         if (res.statusCode == 200) {
  31.           var list = [];
  32.           that.setData({ list: res.data });
  33.         } 
  34.       }
  35.     })
  36.   },
  37.   /**
  38.    * 生命周期函数–监听页面显示
  39.    */
  40.   onShow: function () {
  41.     //在页面展示之后先获取一次数据
  42.   },
  43.   /**
  44.    * 生命周期函数–监听页面初次渲染完成
  45.    */
  46.   onReady: function () {
  47.   },
  48.   /**
  49.    * 生命周期函数–监听页面隐藏
  50.    */
  51.   onHide: function () {
  52.   },
  53.   /**
  54.    * 生命周期函数–监听页面卸载
  55.    */
  56.   onUnload: function () {
  57.   },
  58.   /**
  59.    * 页面相关事件处理函数–监听用户下拉动作
  60.    */
  61.   onPullDownRefresh: function () {
  62.   },
  63.   /**
  64.    * 页面上拉触底事件的处理函数
  65.    */
  66.   onReachBottom: function () {
  67.   },
  68.   /**
  69.    * 用户点击右上角分享
  70.    */
  71.   onShareAppMessage: function () {
  72.     // return custom share data when user share.
  73.     console.log(‘onShareAppMessage’)
  74.     return {
  75.       title: ‘页面标题’,
  76.       desc: ‘页面描述’,
  77.       path: ‘/pages/index/index’
  78.     }
  79.   }
  80. })

这里需要注意的有2点:

1、Page函数中data的值可以直接传递到wxml中去,需要用到this.setData({ key: value })的形式进行传递;

2、在使用wx.request进行网络请求时,如果返回json的话,需要传递一个值为“Content-Type”: “application/x-www-form-urlencoded”头文件header。

3、随后,在index.wxml中获得数据的时候,使用{{key}}的形式进行显示数据,比如:{{list}}。

六、到此,一个简单的微信小程序就完成了,如果小程序中有用到包含js文件等需求,可以使用require函数进行包含操作,也可适当添加images、utils等静态文件夹。

如果全部完成就可以在测试体验后进行上传审核发布微信小程序了。

综上所述:微信小程序的开发,实践始终比想象容易,不管干什么事,最怕的就是不动手,永远考脑子去想,就算脑子无比聪明,但俗话讲,好脑子不如烂笔头,再聪明也装不下程序般复杂的逻辑,感觉微信小程序难就是必然的了,只要勤动手,实践一下,你就会发现再难的事也会迎刃而解。


如果觉得该作者的文章对你有帮助,请随意打赏给他。您的支持将鼓励作者继续创作!
打赏
X
打赏本文作者方式

微信扫一扫可留言


继续浏览有关 微信小程序 的文章

分享至:


发表我的评论
取消评论

表情
  • 119 评论
  • 174 粉丝
  • 136 文章
  • 最新评论
    二呆说:在公众号回复这个关键字就有了~
    222说:1803验证
    二呆说:看见岛有了点信号,我用的时候就是看对应网...
    123123123说:我试过了,没改成功,不着急用,看了qur...
    二呆说:6.0应该也行,时间太长忘记了,好像6....

    • 同乐儿
    • 北京 朝阳区
    • 2018年8月1日
    • 如有仿站或其他事宜联系微信:Diamond0419
    • 查看更多 >
    随机热门
    标签
    wordpress (81) wordpress优化 (26) 原创 (26) wordpress主题 (24) wordpress插件 (21) wordpress教程 (18) Typecho (18) wordpress seo (17) Typecho插件 (14) 博客主题 (8) emlog (7) emlog插件 (6) wordpress维护 (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)