微信小程序开发思路

小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路

下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解

整体结构

默认示例项目的目录结构

从后缀名上可以看到,一共有4种类型:

js 逻辑代码
wxml 视图文件
wxss 样式文件
json 配置信息
/app.js 中可以定义小程序在启动时做哪些业务逻辑、全局函数、全局数据……

App({
  onLaunch: function () {
    ...
  },
  getUserInfo:function(cb){
    ...
  },
  globalData:{
    userInfo:null
  }
})  

/app.json 中进行小程序全局性的配置,例如 底部导航有哪些标签、共有哪些页面、头部title、背景色……

{
  "pages":[
    "pages/index/index", ...  

  ],
  "window":{
    "navigationBarTitleText": "WeChat", ...
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
}  

/app.wxss 定义css样式

/pages 目录下是我们自定义的各个页面,一个页面是一个目录,包含4个文件:此页面的业务逻辑、视图、样式、配置

/app.json 中定义页面时使用没有后缀名

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ], ...
}  

这是一个规则,页面的4个文件的名称必须一致,需要用哪个类型的文件时,小程序会自动查找

整体结构就包括:

1.基础代码

app.js 定义小程序 启动、隐藏 等生命周期中做什么处理、全局的函数、数据

app.json 中配置底部导航的标签、都有哪些页面 等全局信息

app.wxss 中定义好小程序的基本样式

2.页面详细代码

每添加一个页面时,就在 /pages 目录下新建一个页面子目录,其中编写页面代码

wxml 中定义页面的布局结构、都有哪些组件(例如 图片、表单)、绑定数据、绑定事件处理函数

js 中定义这个页面所需要的数据、各个生命周期(例如 页面加载、卸载)中的处理逻辑、事件处理函数

json 中定义此页面的个性配置

wxss 中定义此页面的个性样式

逻辑层
响应式数据绑定
页面中的数据变化不需要我们手动更新,被绑定的数据发生变化时,页面会自动更新
例如

// 页面的视图代码  

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>  

其中绑定了name的数据,还定义了一个按钮,点击后会触发 changeName 方法

// 页面的逻辑代码

Page({
  data: {
    name: ‘ABC‘
  },
  changeName: function(e) {
    this.setData({
      name: ‘123‘
    })
  }
})  

开始时页面会显示 ‘Hello ABC!’
点击按钮后触发 changeName 方法,其中修改了 name 的值为 ‘123’,页面便会更新为 ‘Hello 123!’

API
提供的API很丰富,例如:文件的上传下载、WebSocket、录音、拍照、录视频、本地数据存储、GPS、重力感应、罗盘、支付 ……

模块化
支持模块化的开发,可以将一些公共代码抽离成为一个单独的js文件,作为一个模块,通过 module.exports 和 require 对模块进行暴露和引用
示例
定义模块

//common.js  

function sayHello(name) {
  console.log(‘Hello ‘ + name + ‘!‘)
}
module.exports.sayHello = sayHello  

调用模块

var common = require(‘common.js‘)
Page({
  hello: function() {
    common.sayHello(‘MINA‘)
  }
})  

视图层
组件
视图由一个个的组件构成,例如 按钮、输入框、进度条、文本、图片、视频、对话框 ……

<view>
  <button>按钮</button>
  <checkbox-group>
    <checkbox value="" checked="true"/>北京
    <checkbox value="" checked=""/>上海
  </checkbox-group>
  <loading>加载中...</loading>
</view>  

逻辑处理

1. 循环
初始数据

Page({
  data: {
    items: [{
      message: ‘foo‘,
    }, {
      message: ‘bar‘
    }]
  }
})  

循环显示

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>  

2.条件判断

用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,例如

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>  

事件

组件上绑定事件

<view bindtap="bindViewTap">组件</view>  

js中定义事件处理函数

Page({
  bindViewTap:function(event){
    ...
  }
})  

模板

<!-- 定义2个模板 -->
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>  

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <!-- 根据条件动态选择模板 -->
    <template is="{{item % 2 == 0 ? ‘even‘ : ‘odd‘}}"/>
</block>  

 

小结
小程序的整理结构很简洁,逻辑层是基础的JS+API,视图层需要我们好好熟悉一下各个组件及其属性

时间: 2024-10-07 03:16:14

微信小程序开发思路的相关文章

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发教程,大多数人都搞错的八个问题

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人凭直觉得出的结论,但真正深度调研和

微信小程序开发视频+项目实战

视频课程包含: 微信小程序入门视频.pages页面启动顺序配置.App实战开发视频教程.demo真机演示视频集锦.开发视频教程.源码+PPT.微信小程序五部入门+实战视频 等等 共9G! 这里给大家按照一定思路整理了微信小程序视频和项目实战,涵盖微信小程序全部知识点. 本视频属于作者原创搜集整理!下载方式:翻阅到文章底部 目录 1.微信小程序入门视频 2.微信小程序开发视频教程 3.微信小程pages页面启动顺序配置 4.微信小程序demo真机演示视频集锦 5.微信小程序五部入门+实战视频 6.

Java微信小程序开发_00_资源帖

1.微信小程序开发:http://blog.csdn.net/column/details/13721.html?&page=1 2.微信小程序栏目:http://blog.csdn.net/column/details/14653.html?&page=2 3.

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

微信小程序开发之数据存储 参数传递 数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发类型有哪些?

广州微信小程序开发公司(www.dthulian.com)品向科技表示,随着现在的互联网最热门话题,应该是微信小程序开发.那么我们就和大家来探讨下微信小程序开发类型有哪些? 首先微信小程序是什么? 微信小程序是由微信之父张小龙提出的一个概念,小程序是一种不需要下载安装就可以使用的应用,它实现了触手可及的梦想,用户只需扫一扫或者搜一下就可以打开应用.也体现了用完即走的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,应用将随时可用,但又无需考虑安装及卸载. 对用户来讲,小程序可以实现"用完

微信小程序开发实战视频教程发布

昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够了.... 各位免费拿去,慢慢享用: 链接: https://pan.baidu.com/s/1o7DX7q6 密码: ztzq 也可以添加 微信小程序开发者交流QQ群:434276993,只欢迎对微信小程序开发有兴趣的朋友,其他勿加,感谢.