小程序框架总结

编程之家收集整理的这篇文章主要介绍了小程序框架总结编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

目录:1.框架概述2.项目目录结构3. json配置3.1 全局json文件app.json3.2 单个页面json文件page.json4.逻辑层4.1 全局js文件app.js4.2 单个页面js文件page.js...

目录:

        1.框架概述
        2.项目目录结构
        3. json配置
            3.1 全局json文件app.json
            3.2 单个页面json文件page.json

        4.逻辑层
            4.1 全局js文件app.js
            4.2 单个页面js文件page.js
        
        5.视图层
            5.1 全局/单个页面 wxss文件(app.wxss/page.wxss)
            5.2 单个页面文件page.wxml
 

1.框架概述

2.项目目录结构

全局配置主要设置一些全局的应用参数,全局的样式等。

3. json配置

       3.1 全局json文件app.json

/*app.json可配置的参数:
1.pages:配置程序页面路径
2.window:设置窗口的表现样式
3.tabBar:设置导航tab表现样式
4.networkTimeout:设置网络超时时间
5.debug:设置是否开启debug模式(开发时使用)
*/
 {
 /*页面配置,全局的页面必须在这里声明,否则后面使用时将找不到*/
 "pages":[
 "pages/index/index", "pages/logs/logs", "pages/music/music", "pages/game/game"
 ], "window":{
 "backgroundTextStyle":"light",//下拉背景字体 loading图片样式
 "navigationBarBackgroundColor": "#fff",//导航栏背景颜色
 "navigationBarTitleText": "WeChat",//导航栏文字
 "navigationBarTextStyle":"black",//导航栏标题颜色
 "backgroundColor": "#ffffff",//窗口背景色
 "enablePullDownRefresh": true //是否开启下拉刷新
 }, "tabBar": {
 /*设置导航栏tab选项list*/
 "list": [
 {
 "pagePath": "pages/index/index",//链接路径
 "text": "首页",//tab导航文字
 "iconPath":"/image/wechat.png",//tab图标
 "selectedIconPath":"/image/wechat.png"//选中图标
 }, {
 "pagePath": "pages/music/music", "text": "音乐", "iconPath":"/image/wechat.png", "selectedIconPath":"/image/wechat.png"
 }, {
 "pagePath": "pages/game/game", "text": "游戏", {
 "pagePath": "pages/logs/logs", "text": "文学", "selectedIconPath":"/image/wechat.png"
 }
 ], "borderStyle":"black",//边框颜色
 "position":"top"//tab位置,top/bottom
 }, "networkTimeout": {
 "request": 20000,//wx.request(request请求)的超时时间
 "connectSocket": 20000,//wx.connectSocket(socket请求)的超时时间
 "uploadFile": 20000,//wx.uploadFile(上传文件)的超时时间
 "downloadFile": 20000//wx.downloadFile(下载文件)的超时时间
 }, "debug":true //开启debug模式,开发所用
 }
        ps:json似乎不能使用注释,这里只是为了方便查看,不可在项目中加入。


            3.2 单个页面json文件page.json

/*
page.json只能简单的配置window的一些简单样式
*/
{
 "navigationBarTitleText": "String",//设置导航栏标题文字
 "navigationBarTextStyle": "white",//设置导航标题颜色
 "navigationBarBackgroundColor": "#000000",//设置导航栏背景色
 "backgroundColor": "#ffffff",//设置窗口背景色
 "backgroundTextStyle": "dark",//设置下拉背景字体,loading图片样式
 "enablePullDownRefresh": false,//设置是否开启下拉刷新
 "disableScroll":false //设置是否禁止滑动
}

4.逻辑层

   4.1 全局js文件app.js

//app()注册小程序,注意不能注册多个
App({
 //监听小程序初始化,当小程序初始化完成时会触发发,且全局只触发一次
onLaunch: function() {
 }, //小程序启动或者从后台进入前台时触发
onShow: function() {
 }, //小程序前台进入后台时触发
onHide: function() {
 }, //小程序发生脚本错误,api调用失败时触发
onError: function(msg) {
console.log(msg)
 }, //其他任意用户定义的函数
anyCustomFunc:function(){
 }, //用户自定义的全局数据,可以通过var app = getApp()获取app实例,再通过app.globalData.userInfo获取数据
globalData:{
userInfo:' global data',otherCustomData:'other custom data'
 }
})

   4.2 单个页面js文件page.js
 

//获取注册的的app实例
var app = getApp()
//注册页面实例
Page({
 //页面初始化数据,视图层通过<view>{{text}}</view>绑定
data: {
text: "This is page init data."
 }, //监听页面加载
onLoad: function(options) {
 }, //监听页面初次渲染完成
onReady: function() {
 }, //监听页面显示
onShow: function() {
 }, //监听页面隐藏
onHide: function() {
 }, //监听页面卸载
onUnload: function() {
 }, //用户下拉刷新触发监听
onPullDownRefresh: function() {
 }, //用户滑到底部触发监听
onReachBottom: function() {
 }, //用户点击右上角分享触发监听
onShareAppMessage: function () {
 return {
title: '自定义分享标题',desc: '自定义分享描述',path: '/page/user?id=123'
 }
 }, //事件处理(自定义函数)
viewTap: function() {
 //事件触发后,通过setData()更新页面显示数据
 this.setData({
text: 'Set some data for updating view.'
 })
 }, //用户自定义数据,最好与页面初始化数据分开
customData: {
data1: 'custom data'
 }
})

 5.视图层

   5.1 全局/单个页面 wxss文件(app.wxss/page.wxss)
        (1)概述
               wxss为wxml的样式文件,大部分特性与css一致

        (2)相对于CSS的不同于扩展
               2.1)  尺寸单位改为了rpx
               2.2)  样式导入改成了 @import "filename.wxss"
            
        (3)选择器
     


(图片来自:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html)

  5.2 单个页面文件page.wxml
        (1) 概述
       page.wxml文件定义用户界面(也就是所谓的UI),通过数据绑定和事件绑定从JS逻辑层获取数据更新UI显示,达到动态更新页面效果

        (2)数据绑定

//page.js
Page({
data:{
testdata:'hello i am js data!'
 }
})
//page.wxml
<view>{{testdata}}</view>


        (3)事件绑定

//page.js
Page({
data:{
testdata:'hello i am js data!'
 }, //编写事件响应函数,改变显示数据
tapEvent:function(){
 this.setData(
 {
testdata:'can you see me?'
 }
 )
 }
})
//page.wxml 通过bindtap指定事件为tapEvent
<button bindtap="tapEvent">点我试试</button>
<view>{{testdata}}</view>

 

总结

以上是编程之家为你收集整理的小程序框架总结全部内容,希望文章能够帮你解决小程序框架总结所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的微信小程序相关文章

1、先开发小程序,小程序需要有亮点,毕竟新颖(这样别人才更好去点击查看)2、条件是独立访客(UV)不低于1000,1000人说多不多,说少也不少,因为小程序是没有链接的,是不可以进行一个流量刷取的,独立访客是需要1000个实实在在的用户,并不是访问量。3、开发好小程序之后,自己要为自己宣传,前提小程序需要做的完美,小程序一定要做分享功能,将小程序分享到个人、微信群、朋友圈,这样估计很容...
WXSS(WeiXin Style Sheet)与CSS对应,用于描述页面的样式。特性内联样式:组件的 style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。选择器对于常用的选择器,目前支持的选择器有:注:绿色背景色行表示官方文档中没有说明,但经个人亲测后确定也支持的选择器。目前不支持的选择器有:注意:如...
微信开发者工具的快捷键微信开发者工具的所有快捷键
注册小程序帐号在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮。选择注册的帐号类型显示了4选项,我们现在是注册小程序,所以选择小程序填写邮箱和密码请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。激活邮箱登录邮箱,查收激活邮件,点击激活链接。填写主体信息点击激活链接后,继续...
由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等等,因此我们还需要借助一些第三方的api来实现下面,介绍使用百度地图的api来获取地位位置的信息。1&gt; 第一步:先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/guide/...
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置: 微信小程序教程系列15下面介绍使用百度api来获取天气信息。1&gt; 第一步:先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key申请到ak后,在我的应用...
微信小程序框架为开发者提供了一系列的组件和API接口。组件主要完成小程序的视图部分,例如文字、图片显示。API主要完成逻辑功能,例如网络请求、数据存储、音视频播放控制,以及微信开放的微信登录、微信支付等功能。组件官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组...
前言:很久之前就说小龙叔要出个小程序,那个时候刚在学习Android原生开发,当时觉得Native APP还是无可替代的,不管是用户体验还是功能扩展都无法与Native APP比,并且也没多少人会愿意舍弃成为独立流量入口的机会不做而去选择受限于微信的小程序,同时还增加了用户停留微信的时常,增加了微信的用户活跃度。现在想想我真的太年轻,其实微信小程序还是有很大的用武之地的,让我...
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注