全部产品服务
  • 网站建设◆平台开发
    网站定制
    网站建设方案
    网站建设收费明细
    模仿建站
    模板建站
    多合一建站
  • 网络推广
    SEO优化推广
    万词霸屏推广
    百度竞价推广
    爱采购CPC推广
    四大搜竞价推广
  • 商城开发
    分销商城
    小程序商城
    入驻联营商城
    B2B订货商城
    商城开发
    订货宝
  • 应用市场
    销售系统
    智能名片
    企业名录系统
    crm系统
    微信公众号助手
    400号码
    企业邮箱
    教育系统
    门店会员系统
    互动游戏系统
    微信传单
    云设计系统
    进销存
182-690-14756
立足南宁.服务全国

详解微信小程序开发(项目从零开始)

 二维码 99
发表时间:2013-04-17 17:04作者:南宁网站建设来源:网站建设|网络推广|网络整理|分销商城

微信小程序 开发文档_小程序开发_微信小程序服务端开发

一、序

微信小程序,估计你们都不陌生,现在应用场景非常多。今天就系统的介绍一下小程序开发。注意,这里只从项目代码上做解读,不牵涉小程序如何办理、打包、发布的东西。(这些跟随陌陌官网文档的步骤跑就好)。好了套话不多说,看目录。

注: 小程序是一套特殊的东西,融合了原生跟web端。他是一个不完整的浏览器对象,所以这些DOM 、 BOM 的东西能够使用,但是他又通过陌陌APP谋求了多线程。

二、 目录

三、如何建立小程序

很简单,首先下载陌陌开发者软件,下载稳固版本的就好。 下载 然后,创建小程序,可以参考以下照片:

注意即将的小程序需要审批,拿到即将的APPID,我们检测的以及暂时没有的可点那些检测的appid,小程序模板选用默认就好。按照那样的步骤跑完,我们就建立完一个小程序了。

四、webstrom支持小程序开发

创建完小程序之后,我们先不急于研发。工欲善其事必先利其器,微信开发者软件有点卷,而且功能少,开发效率太低。所以我们抑或改建自己的编译器,这里只介绍2种技巧。一是 hbuilderX,他有支持小程序的模块,很精巧的一款编译器; 二是 webstorm,我用的他,在这介绍一下配置的方式,其他的各位自行google吧。

1、支持wxml跟wxss的文件种类,有语法高亮。 打开webstorm编译器小程序开发小程序开发,依次点击 文件 -- 设置 -- 编辑器 -- 文件种类 , 找到 html文件,添加 *.wxml; 找到Cascading style Sheet ,添加 *.wxss。就OK了

微信小程序服务端开发_小程序开发_微信小程序 开发文档

2、支持小程序代码告诫。 下载 这个文件,然后,把他放在一个空旷的地方; 然后, webstorm 点击 文件 -- 导入设置 ,找到这个下载的文件,点击确认即可。

以上就是webstorm支持小程序语法的操作。

五、基础文件目录解析

然后解释一下小程序的目录构架。

project.config.json: 小程序的配置文件,包含项目打包配置、上传代码手动压缩等等,是一些研发、打包之类的配置。

app.json: 当前项目的配置文件。包括项目的页面引进、导航条肤色、导航条标题 等等,是项目详细至代码研发上的配置。介绍几个配置:

pages: 包含的页面。每次增设页面都得在这里引进广西网站建设公司,否则新页面的json配置等未能生效。 注意pages中页面先写的先渲染,所以变量第一条也就是我们的首页。

window: 配置所有页面导航条图标、颜色、背景色等

app.js: 小程序入口文件。生成小程序实例,App({}), 通常在这获得用户信息、授权信息、定义全局数组等。

app.wxss: 小程序全局 style 文件。对整个项目页面生效。通常规定项目的 字体、基础色调,定义一些公共款式。

utils: 工具方程目录。通常拿来放一些公共的js技巧。比如封装的request恳求,一些甭的处理数据哪个的手段。

pages: 小程序的页面目录。所有的小程序页面,都写在这上面。

六、完善项目目录

上边粗略解释了一下小程序的基础文件,现在根据常用的规范制订一下项目目录,这上面包括一些个人看法,有必须的参考即可。先看一下结果:

现在解释一下这种目录:

components: 我们封装的小程序可复用部件。

constants: 一些项目中的常亮。

image: 用到的照片。

services: 用到的所有插口目录

大致就扩建了这几个,如果有别的需求,根据自己的状况提高。

小程序开发_微信小程序 开发文档_微信小程序服务端开发

七、基础词汇解析

现在大概解释一下小程序的句型。首先, 创建新页面,默认都建立 *.wxml *.wxss *.js *.json 和我们以前写的代码差不多,都是html js css,多了个json配置文件

*.json:常用的属性有2大块,navigationBarTitleText 相关的设置上方标题的,usingComponents 引用的部件

*.js:getApp() 获取小程序实例,拿全局数组等; Page({}) 创建页面; data 当前页面的数组;onLoad 生命周期,页面读取完毕。

*.wxml:注意,小程序支持的标签极少,像 span 是支持的,div不支持,一般用view取代块级,span、text 代替行级。

*.wxss:大部分css选择器不支持,支持的似乎才5个微信小程序开发,想支持less等得自己配置

// json文件 { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText":"我的", "usingComponents": { "menu": "/components/menu/index" } } // js文件 const app = getApp() Page({ data: {}, onLoad: function () {}, })

八、实现页面跳转

和一般的web开发一样,小程序页面跳转页分2中,wxml中的vavigator标签,以及js的navigator相关的api。路由跳转的方式有好几个,这里不一一详说了,常用的直接跳转

wx.navigateTo,重定向 wx.redirectTo等等,具体的请看官方文档。这里强调一下路由传参,很简单:
1、少量数据。直接问号传参。然后在目标页面的onLoad方法中通过options参数接收。
2、大量数据。直接塞到全局变量里面。

// wxml跳转页面 <navigator url="/pages/my{{item.path}}" class="navigator"> <image class="imgIcon" src="{{item.icon}}"></image> <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view> </navigator> //js跳转页面 wx.navigateTo({ url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}` })

//路由传参如何接收

onLoad: function (options) {

console.log(options)

在线客服
 
 
 
 
 工作时间
周一至周五 :8:30-17:30
周六至周日 :9:00-17:00
 联系方式
郑工:182-6901-4756