2018-05-06 11:12:10 qq_17470165 阅读数 16476

相关文章

微信小程序开发(二)开发之日历打卡小程序发现页

微信小程序开发(三)入门之创建打卡活动

微信小程序开发(四)入门之打卡功能开发


前言

一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序如雨后春笋般出现在我们的视线里。追着这波大浪潮,笔者所在的公司也开始将有些需求转移到微信小程序上。接下来将以几篇文章将最近的一个日历打卡小程序的开发过程以及遇到的问题和大家做个分享。

(一)微信开发者工具

小程序团队推出了自己的开发工具-微信开发者工具,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。论坛上吐槽的文章也是一大堆,存在很多bug,笔者在开发过程中也是被它坑过。笔者是安卓开发者,习惯于这种可视化的编程,所以没有选择Webstrom或者其他开发工具,接下来将介绍微信开发者工具基本功能



   

  1. 机型选择:小程序以IPhone6的屏幕尺寸为设计标准,让UI小姐姐按照IPhone6屏幕尺寸来切图。
  2. 预览界面:写好视图布局后点击编译,视图界面刷新显示
  3. 远程调试:手机端和PC端开发工具联调(非常实用)
  4. 上传代码:上传到腾讯服务器,提交审核必经步骤。可以填写版本号和备注信息
  5. 5-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFiledownloadFile域名。注意:域名小程序要求必须是https 
  6. 控制台:打印输出信息,方便调试
  7. 资源文件:对应项目的文件目录,一般可以在这里进行断点调试
  8. 本地数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
  9. 视图调试:标组件以子父层级结构呈现,方便调试。

以上就是在开发过程中微信开发者工具常用到的功能,微信开发者工具也在不断的完善,为了以后更好的提升开发效率,也需要我们在开发过程中将遇到的问题不断的反馈给小程序团队做优化,希望大家抱着包容的心态。开发过程中大家也可以依照自己的习惯选择其他的开发工具。


(二)小程序框架以及目录结构介绍

    

  •  逻辑层

    小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。逻辑层对应的是js文件,在每个页面的js文件中,系统提供了一系列的方法如:页面生命周期onLoad(),onShow(),onHide(),等,下拉刷新onPullDownRefresh(),页面到底部(上拉加载)onReachBottom()方法,分享功能onShareAppMessage()等。


  • 视图层

    框架的视图层由 wxml  wxss 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 wxml 由小程序提供的组件组成,wxss css 样式。

  • app文件

    app.json 
    文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。页面的json文件一般用来配置当前页面的窗口表现。app.js 用来提供全局变量,如baseUrl。app.wxss 提供全局的css样式

    {
      "pages": [                    //页面的路径(在此处可快捷创建页面)
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {                   //视图窗口
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {                   //底部tab
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": {           //设置是否超时
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }
    
    
  • utils/.json 

    系统提供的工具类,一般编写公共的方法导出方便其他页面调用。

(三)结束语

    本篇文章简单的介绍了微信开发者工具和小程序的框架,微信的开发文档对相关功能的介绍十分的详细。接下来将开始我们的日历打卡小程序开发之旅。


2016-11-09 22:56:26 CrazyZhang1990 阅读数 5060

【主要内容:】


1. 微信小程序的文件结构

2.文件目录中每个文件的作用

3. 小程序页面结构


一、微信小程序的文件结构


微信小程序开发初探中讲了如何创建一个微信的小程序以及微信小程序web开发工具的使用介绍。今天就来介绍一下微信小程序工程的目录结构。下边这张图展示了新建的一个微信小程序工程中包含的所有文件:





二、文件目录中每个文件的作用


每一个微信小程序工程都包含了两个文件夹pages和utils,和三个文件app.js、app.json、app.wxss。



2.1 pages


微信小程序会有很多的页面,每个小程序页面都是以文件夹的形式存放在pages目录下边。默认的工程中包含了两个页面:Index和logs


2.3 utils


这个是公共的、通用的文件夹。从util.js文件的代码中可以看出,日后这个文件中可能存放的是开发中经常用到的公共、通用部分的代码。比如系统默认写入的日期转化函数。




每一个小程序工程都包含了下边这三个文件。也就是说每个小程序主题都由这三个文件组成,而且必须放在项目的根目录下。



2.4 app.js 


从app.js的后缀就可以看出,他的实质是JavaScript文件,用来控制小程序的逻辑




2.5 app.json 


app.json里边主要是工程的配置文件。在app.json中可以设置一些工程的公共设置。比如:页面的个数、窗口的显示设置、Tabbar设置、网络设置等等。




2.6 app.wxss


app.wxss文件实质是CSS层叠样式表,所以说这个文件是小程序公共的样式表文件,可以在这个文件中做视图层面的样式设置





三、小程序页面结构


微信小程序由很多个页面组成,每个小程序页面都有4个文件组成:




和小程序主体部分的三个文件作用一样,小程序页面描述多了一个xxx.wxml文件,这个一个HTML类型的文件。所以xxx.wxml的作用是开发页面布局功能

为了方便减少开发配置,微信规定描述页面的4个文件必须具有相同的路径文件名



想学web前端开发技术的朋友,可以点击这个链接:微信小程序web前端技术开发视频教程,这里有web前端开发需要的所有技术。这套视频教程讲解的非常全面,涵盖所有的web前端技术:HTML5 + CSS3 + JavaScript + DOM + JQuery + Ajax + Angular.JS + RESTful + Node.JS +项目实战。


  欢迎大家关注“芒果iOS”微信公众账号,芒果会经常为大家分享好的技术文章:


2017-12-28 17:03:15 qq_35713752 阅读数 3736

微信小程序开发交流qq群   581478349

   承接微信小程序开发。扫码加微信。

正文:

微信官方于 2017 - 12 - 28 日 开发微信小程序 开发小游戏 ,

微信小程序小游戏开发官方文档的地址

https://mp.weixin.qq.com/debug/wxagame/dev/index.html?t=20171228

微信小程序小游戏开发编译器下载地址:

https://mp.weixin.qq.com/debug/wxagame/dev/index.html?scene=21#wechat_redirect

 

 

2018-09-04 22:50:45 i042416 阅读数 1349

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用。

这个系列接下来的文章我们就来研究使用微信开发者工具自动生成的这个小程序的实现文件。本文以小程序的视图设计为主,就是下图所示pages/index目录里的index.wxml文件。

我的日常工作是用一个叫做UI5的前端框架做前端开发,刚好这个框架也支持创建xml格式的视图(UI), 和微信小程序的wxml非常相似。

做过JSP开发的朋友们,可以把wxml类比成JSP文件。

wxml源代码:

<!--index.wxml-->

<view class="container">

<view class="userinfo">

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>

</view>

<view class="usermotto">

<text class="user-motto">{{motto}}</text>

</view>

</view>

下面逐一解释每行代码。

第二行: 声明了一个视图元素,css类型为container。这个container类是微信小程序自带的,如果删除,小程序视图位置会乱掉,参考我下面的测试:

所以需要保留。

第三行: view元素可以嵌套,相当于原生HTML里的div元素。此处定义了另一个view元素,css类为userinfo。这个css类不是微信提供的,而是我们自己开发的,位于文件index.wxss里:

第四行:

获取头像昵称

定义了一个按钮,标签为“获取头像昵称”。

这个按钮仅当表达式!hasUserInfo && canIUse为true时才显示。

button是微信小程序框架提供的组件,组件是视图层的基本组成单元,自带一些功能与微信风格的样式。 注意这里的button标签并不是HTML原生的标签。

在微信官网上可以查询组件的API:

https://developers.weixin.qq.com/miniprogram/dev/component/

下面这两个属性的含义:

open-type=“getUserInfo”: 点了这个按钮之后,会自动取当前点击了该按钮的微信用户的明细数据

bindgetuserinfo=“jerry_getUserInfo”: 当用户数据成功取回来之后,执行我们自己开发的回调函数jerry_getUserInfo, 该函数定义在小程序index/index.js里。

第五行到第八行:

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>

定义了一个block区域,有两个UI元素组成:image和text。

对image元素,bindtap=“bindViewTap”, 意思是一旦点击,执行我们在index.js里实现的事件处理函数bindViewTap。

class=“userinfo-avatar”: userinfo-avatar也是我们在wxss里自定义的css类。

src="{{userInfo.avatarUrl}}": 该image的src属性绑定到数据模型userInfo的字段avatarUrl上。数据类型userInfo是index.js里创建的,绑定到当前的视图上。

而另一个文本元素text显示的文本绑定到userInfo.nickName上。

我们可以直接在手机上打开微信小程序的console页面,从而查看当前视图绑定的数据模型userInfo的明细,其中userInfo.nickName包含的值如下:

微信小程序开发系列二:微信小程序的视图设计

第11行:{{motto}}

纯文本元素,显示的文本绑定到数据模型motto上。这个模型字段motto硬编码成Hello World,所以我们最后在小程序上看到显示的“Hello World"。

这篇文章即整个微信小程序开发系列的第二篇到此结束。下一篇文章我会继续讲解index.js里的代码含义。

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

2018-09-04 22:55:35 i042416 阅读数 1140

我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家。

这是第一篇,从零开始学习微信小程序开发。主要是小程序的注册和开发环境的搭建。

首先我们要在下列网址申请一个属于自己的微信小程序:

https://mp.weixin.qq.com/cgi-bin/wx

点击按钮“前往注册”。注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱。我用的是网易邮箱。注册之后,邮箱会收到一封激活邮件。

激活之后,就可以进入小程序主体信息登记页面了。这里需要使用身份证号码和手机验证码进行登记。

登记完毕之后,就可以进入微信开发者工具了。我选择的是小程序项目:

这是我注册的用于学习目的的微信小程序:

在开发管理->开发设计菜单里,找到我们刚才注册的微信小程序的ID:抄下来,后面要用。

接下来,在下面这个链接去下载微信开发者工具:

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

大家可以把它当成是一个集成开发环境(IDE)。

安装完毕后启动微信开发者工具,会要求我们指定一个本地项目目录和填写微信小程序的AppID。这个ID我们前一步已经抄下来了。

直接填进去,勾上“建立普通快速启动模板”,然后微信开发者工具会自动帮我们创建一个Hello World版本的微信小程序资源文件出来。

自动创建好的小程序如下图所示,就是一个Hello World的文本。

我们点击“上传”按钮:

随便维护一个版本号,比如1.0.0, 然后点击”上传“。

然后回到小程序管理后台,能看到我们上面通过微信开发者工具上传的1.0.0版本的小程序了。我们点击”提交审核“右边的下拉菜单,选择”选为体验版本“:

会生成一个体验版的二维码,这时发送给你的朋友,就可以使用这个小程序了。

当您的朋友在手机上扫描该二维码,会看到如下界面:该小程序标注了”体验版”的提示:

点击”前往体验版”, 就能看到微信开发者工具自动生成的Hello World小程序了。

这个系列的下一篇文章,我会把我分析微信开发者工具自动生成的这些资源文件的心得分享给大家。

要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

没有更多推荐了,返回首页