微信小程序制作
当前位置:网站首页 > 小程序热文 > 作为小程序开发者必须要懂的一些规则 返回列表

作为小程序开发者必须要懂的一些规则

作者:admin 时间:2018-12-17 浏览量:1116

微信公众号开发的温度有所降低了,现在有开始了微信程序开发了,其实这都是属于微信公众平台下的两大分支,目的就是为了打造和营造微信生态系统,当然我们也是参与了,就是帮助用户去实现在微信公众号上跟微信小程序上的一些插件开发工作,当然了另外一种参与者就是终端的用户了,这些用户都是非常积极的,也看到了微信小程序,维系公众号未来的发展前景了。

开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南)本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。

微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」?我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧。为了让大家尽快看到这份教程,博卡君注定要熬夜了!今晚开始更新,希望明天一早就能发布第一篇教程!记录开始!看看几天能完成变身吧!


01获取微信小程序的AppID

首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号,登录https://mp.weixin.qq.com,就可以在网站的「设置」-「开发者设置」中,查看到微信小程序的 AppID 了。
注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份-开发者」模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

02创建项目
我们需要通过开发者工具,来完成小程序创建和代码编辑。开发者工具安装完成后,打开并使用微信扫码登录。选择创建「项目」,填入上文获取到的 AppID,设置一个本地项目的名称(非小程序名称),比如「我的第一个项目」,并选择一个本地的文件夹作为代码存储的目录,点击「新建项目」就可以了。为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择「是」,开发者工具会帮助我们在开发目录里生成一个简单的 
项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在「编辑」里可以查看和编辑我们的代码,在「调试」里可以测试代码并模拟小程序在微信客户端效果,在「项目」里可以发送到手机里预览实际效果。

03编写代码
点击开发者工具左侧导航的「编辑」,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js 后缀的是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API,如本例的同步存储及同步读取本地数据。

//app.jsApp({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

{
  "pages":[    "pages/index/index",    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }}
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

/**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;}

04创建页面

在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件,.wxml 后缀的文件是页面结构文件。

index.wxml是页面的结构文件:

<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
本例中使用了 、、来搭建页面结构,绑定数据和交互处理函数。

index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')    var that = this
    //调用应用实例的方法获取全局数据
   app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})
index.wxss是页面的样式表:/**index.wxss**/.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}
页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json是页面的配置文件:
页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
logs的页面结构

<!--logs.wxml--><view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block></view>
logs 页面使用 控制标签来组织代码,在 上使用 wx:for-items 绑定 logs 数据,并将 logs 数据循环展开节点

//logs.jsvar util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})
运行结果如下:
05手机预览
开发者工具左侧菜单栏选择「项目」,点击「预览」,扫码后即可在微信客户端中体验。目前,预览和上传功能尚无法实现,需要等待微信官方的下一步更新。如你所见,微信官方给出的开发指南还非常简单,很多细节、代码和功能都没有明确的展示,所以接下来就到博卡君展示实力的时候啦!开发教程正式开始!
第一章:准备工作
做好准备工作很重要。开发一个微信应用号,你需要提前到微信的官方网站(weixin.qq.com)下载开发者工具。下载最新微信开发者工具,打开后你会看到该界面:
2点击「新建 web+」项目,随后出现如下画面:
3该页面内的各项内容需要注意——
AppID:依照官方解释来填。
Appname: 项目最外层文件夹名称,如你将其命名为「ABC」,则之后的全部项目内容均将保存在「/ABC/…」目录下。本地开发目录:项目存放在本地的目录。
注:再次强调,如果你和团队成员共同开发该项目,则建议你们使用同样的目录名称及本地目录,以确保协同开发的统一性。如果你之前已有项目,则导入过程与以上内容近似,不再赘述。
4准备工作全部完成后,点击「新建项目」按钮,弹出框点「确定」。
5如上图所示,此刻,微信开发者工具已经为你自动构建了一个初始的 demo项目 
该项目内包含了一个微信应用项目所需具备的基本内容和框架结构。点击项目名称(图中即「cards」)进入该项目,就能看到整个项目的基本架构了:
第二章:项目架构
微信目前用户群体非常庞大,微信推出公众号以后,火爆程度大家都看得到,也同样推动着 Html 5 的高速发展,随着公众号业务的需求越来越复杂,应用号现在的到来也是恰到好处。
微信提供给开发者的方式也在发生全面的改变:从操作 DOM 转为操作数据,基于微信提供的一个过桥工具实现很多 Html 5 在公众号很难实现的功能,有点类似于 hybrid 开发,不同于 hybrid 开发的方式是:微信开放的接口更为严谨,结构必须采用他提供给的组件,外部的框架和插件都不能在这里使用上,让开发者完全脱离操作 DOM,开发思想转变很大。工欲善其事,必先利其器。理解它的核心功能非常重要,先了解它的整个运作流程。
生命周期:
在index.js里面:
开发者工具上 Console 可以看到:
在首页 console 可以看出顺序是 App Launch–>App Show–>onLoad–>onShow–>onReady。
首先是整个 app 的启动与显示,app 的启动在 app.js 里面可以配置,其次再进入到各个页面的加载显示等等。可以想象到这里可以处理很多东西了,如加载框之类的都可以实现等等。

路由:
路由在项目开发中一直是个核心点,在这里其实微信对路由的介绍很少,可见微信在路由方面经过很好的封装,也提供三个跳转方法。
wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。
wx.navigateBack():关闭当前页面,回退前一页面。这三个基本上使用足够,在路由方面微信封装的很好,开发者根本不用去配置路由,往往很多框架在路由方面配置很繁琐。
组件:
此次微信在组件提供方面也是非常全面,基本上满足项目需求,故而开发速度非常快,开发前可以认真浏览几次,开发效率会很好。
其它:
任何外部框架以及插件基本上无法使用,就算原生的 js 插件也很难使用,因为以前的 js 插件也基本上全部是一操作 dom 的形式存在,而微信应用号此次的架构是不允许操作任何 dom,就连以前开发者们习惯使用的动态设置的rem.js也是不支持的。
此次微信还提供了 WebSocket,就可以直接利用它做聊天,可以开发的空间非常大。

联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 现如今对于用户来说,小程序很大程度上已经逐渐成为很多人们日常生活中不可或缺的一部分了。在这种情况下,很多企业都想要同过小程序来获取到更多的流量或者用户。那么对于想要开发小程序的企业或用户来说,开发一款小程序需要准备哪些资料呢?

    首先应该准备一家公司的营业执照,最好是科技公司的,因为科技公司是可以申请高新技术补贴的,一般来说有十到二十万左右。其次就是公司的经营范围,这个一定要跟公司经营类目相符合,不然在经营过程中,如果被查出来经营范围不一样,那么就会被下架小程序的。如果说是个人使用的小程序的话,就需要去申请一个个体的营业执照,把经营范围填好,因为个体是可以申请小程序的,走的是法人。有了这种营业执照以后呢,就可以帮申请域名、服务器、小程序小程序的名称,还有logo这些等等。

    对于一个小程序来说所需要准备的东西并不是很多,主要是开发过程中所需要的费用相对来说会比较高一些。
  • 对于用户来说,小程序的开发费用往往是很多用户关注的重点,很多用户都是因为开发小程序的费用太高而不得不放弃小程序的开发,那么对于用户来说应该如何降低小程序的开发费用呢?

    首先确定开发主要的功能。在不确定小程序未来能不能帮助赚钱的情况下,先定制开发核心功能,等小程序赚钱了以后再进行升级开发。其次,找有开发类似经验的公司做二开,这样更能确保开发公司都能理解到位,并且比起全新的定制开发来说价格也会更低。第三,整理需求,做需求文档,这个是很多用户都忽略的,需求清晰完整,开发公司才能清楚的了解工期报价才不会虚高。

    对于用户来说这些都是能够降低开发费用的方式之一,当然了对于用户来说节省开发费用的方式有很多,但是想要做出真正好的小程序所需要的价格和时间一定是非常多的。
  • 小程序定制的费用是很多用户不想选择定制开发的主要原因,对于用户来说定制开发的费用太高了,一般的企业是很难承受的,那么应该如何降低定制开发的费用呢?

    首先第一个,就是用户想要定制开发的这个小程序功能,开发公司正好有已经开发好的功能。那这个时候呢小程序开发公司一般来说给的价格都会比较低一些,因为有的代码他们是可以直接用的。第二,如果说你想要自己开发的这个小程序,完全是你的一些个性化的一些要求。开发公司没有已经开发好的,类似的这个功能案例。这个时候呢,降低一点需求把最重要的功能先开发出来,后面在进行优化升级。除此之外,就是选择一些人力成本比较低的二线城市,或者是三线城市,虽然有可能在开发过程中会出现一些不确定的因素,但是相对来说价格会便宜不少。

    当然除此以外呢,想减少小程序定制开发费用的方式也有很多,一般来说最好是先开发完小程序的核心功能之后上线使用,当有足够的资金后在对其进行升级和优化,对于很多预算有限,但是需要进行定制开发的用户来说着是最好的方式。
  • 在进行小程序的定制开发过程中,有可能会出现很多问题,有些问题很多情况下都是可以提前避免的,这对于小程序的开发和后期的维护等都会有很大的帮助。那么在进行小程序的开发时应该注意那些事项呢?

    第一个需要注意的事项就是先要明确小程序开发的功能。很多时候由于没有和网络公司明确小程序定制开发的功能,导致后期开发过程中出现了大量的问题,甲乙双方的相互扯皮。为了避免后期的返工和修改,一定要在签约小程序开发合同之前,要把定制开发的功能,以文字的形式记录下来。第二个需要注意的事项就是开发公司是不是百分之百给你源代码交付。在小程序开发过程中,很多公司为了降低开发成本,有可能会直接在网上下载流通的免费代码,通过简单的修改给你进行交付。因为这套代码的版权不是他们公司开发的,后期有可能会收到起诉函。第三个需要注意的事项就是做小程序开发后期有没有隐形的费用。因为做小程序开发,后期或多或少都会做一些调整,只要让公司改个东西或者做一些服务,都有可能会是天价,除非啥都不改。所以一定要在小程序确定合作之前,把后期的服务范围落实到位。

    在小程序的开发过程中,很多主要的问题就是来源于这些地方,只要明确好小程序的功能,和后期的维护、优化等方面的问题后,基本上就能够减少很多问题了。
  • 一般来说,需要进行小程序定制开发的时候,说明一般的模板小程序已经很难满足需求了。对于一个定制小程序开发大致需要以下几个阶段,第一确定产品需求,第二产品原型设计,第三产品ui设计,第四开发过程,第五测试验收上线。

    在开发过程中,有不同的角色来承担对应的项目工作,核心需要四个角色。第一,产品经理主要负责需求调研以及产品原型设计,包括产品的使用流程、逻辑关系等一系列工作。第二,ui设计师将产品原型具体化,上色大师配合程序员贴图等工作。第三,程序员包括前后端开发工程师,负责产品的具体开发工作。第四,测试工程师负责产品测试、调试校验系统的稳定性后,产品才能进行上线。

    一般来说小程序的定制开发费用主要是开发人员的成本费用,加上一些其他的像是电费等。总的来说,开发一款小程序的费用很大程度上和开发人员的数量和开发时间有关。一般情况下开发一款定制的小程序最少也需要一万元左右,要是想要让小程序有更好的发展空间或者是更多的功能等,所需要的费用就会更多。

  • 一般来说小程序的开发分为两种,一种是定制开发,另一种是套用模板。那两者有什么区别?又该如何选择呢?首先要明白模板和定制有什么区别。

    首先就是功能。定制开发就是用户想做成什么样都可以,只要不违规就不受限制。而模板往往是固定的模块,你想要什么功能,把它就拖进来,没有的功能就用不了。一般情况下网络公司都会和用户沟通一下需求,询问想做成什么样子,想达到什么样的效果,然后看一下模板能不能满足需求,如果不满足,就会推荐定制开发。

    其次就是费用了。定制开发一般情况下需要产品经理、ui、前端、后端和测试至少五个人左右,那成本都在几万到十几万都很正常。而模板就不一样了,因为已经开发好了,直接套用的费用相对于定制开发来说会便宜很多。

    在就是开发时间了。定制开发很多都是以月为单位,毕竟要根据用户的需求等多个方面进行开发,快一点的都需要一个月左右。而模板快的话,是根据用户的需求将已经写好的功能组合到一起,一般三五天就可以上线使用了。

    最后就是稳定性了。定制开发的小程序在使用前都会有很多的bug存在,只有反复调整才会不断的完善。而模板是不一样的,它是成千上万家的商户,经过多年的使用不断反馈,优化,成了一套非常稳定的系统,很少会出问题。当然了用户群体越多,发现的问题就越多,完善后的功能就更全面,系统也就更稳定。

    这是模板跟定制开发的四个区别。那用户到底该如何选择呢?关键看需求,只要模板能满足的,就尽量选择模板。模板的优点就是费用低,时间短,稳定性高,只有系统不能满足用户需求的时候,才会考虑定制开发。

029-8619 5145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央区元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
网站地图 Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1