2018-07-10  1,113 views 8

ASP.NET WebAPI 开发小程序(列表页)开发实例 知识基础(一)

本系列都是比较基础的小程序开发知识,讲的内容比较口语化,也比较浅显。为了对于初学者而言更有帮助,本系列教程都会是截图+源码的方式去编写。

本系列教程的结构如下:

 1 )小程序基础知识(常用且浅显)

2)小程序基础布局知识

3)小程序列表页布局实例

 4)ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例

5)小程序请求ASP.NET WebAPI数据并在前端实现数据绑定实例

6)小程序数据提交Post的使用

效果如下:

UI效果图

1、首先了解小程序的目录结构

所有的页面都放到Page目录下,Page下的每个目录分别是各个业务区块,每个业务区块下仍然可创建多个业务区块。

在每个业务区块的目录下可创建一个或多个page(即页面),一个page包含一个同名的js文件、json(配置文件)、wxss 样式表文件、wxml布局文件。

JS和部分数据操作绑定语法跟Vue很相似,wxss杨思表基本上就是css3,wxml基本可以理解成把原有的 div、span替换成 view  img替换成image,但是比如都头尾标记成对出现。

如下图所示:

图1  项目目录结构

 

每个页面的标题可在对应的json中配置,属性为navigationBarTitleText,我们可以在对应的json文件中这样配置,更多属性可以查看官方文档

图2 根目录全局配置、js及样式

{"navigationBarTitleText": "标识天下"}

全局的配置、样式、数据可以放在根目录下的js、wxss及json下,如需要设置整个小程序所有页面的背景色为#fafafa,只需要在根目录下的app.wxss中设置Page的样式即可:

/*app.wxss*/
Page{
  background:#fafafa;
}

如果要设置多有的页头都为#37C6C0,只需要在app.json的window节点中加入navigationBarBackgroundColor属性即可,同时开可以设置颜色、文字、粗细等,如下:

/*app.json*/  
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#37C6C0",
    "navigationBarTitleText": "测试系统",
    "navigationBarTextStyle": "white"
}

而一些全局的数据定义,全局的方法定义则可以写在app.js中,如:

//全局数据及方法定义
globalData: {
    userInfo: null,
    apiUrl:"http://localhost:21670/",
},
checkLogin:function(){
    console.log("检测是否登录")
    return true;
}

但是要注意,上面的代码,全局的参数和方法的结构应该是放在App({})中的,全局的数据赋值方法如下:

var app = getApp();
app.globalData.userInfo = {nickname : '张三', gender : 1}

全局的数据取值及方法使用如下:

var app = getApp();
var userInfo = app.globalData.userInfo;
console.log(app.globalData.userInfo)

if(app.checkLogin()){
  console.log("登录成功")

}

配置完成及设置相应的值之后的效果:

图3 配置全局属性后列表页的基本效果

对应设置值后的输出及调用全局方法的输出如下:

图4  全局变量赋值及调用方法的输出效果

以上只是基本操作,还有很多常用的操作需要在摸索中发现,如有遇到问题可以度娘或查看官方文档。

后续系列教程将包含:小程序布局 + 后端开发 + 前端数据绑定

系列教程未完,待续。。。

 

8 条留言  访客:1 条  博主:1 条   引用: 6 条

  1. 鞥杨光

    :evil: :evil: 中文

    • 51softs 博主

      @鞥杨光 难道写个小程序开发教程还用英文写 ( ╯□╰ )

来自外部的引用: 6 条

  • ASP.NET API 开发小程序(列表页)开发实例之如何进行布局(二) | 落雨信息
  • | 落雨信息
  • ASP.NET API 开发小程序(列表页)开发之列表布局实例(三) | 落雨信息
  • ASP.NET API 开发小程序(列表页)开发之列表布局实例(四) | 落雨信息
  • ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例(四) | 落雨信息
  • ASP.NET WebAPI 开发小程序(列表页)开发之前端绑定列表页数据实例(五) | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: