怎么搜索小程序的appid

　　小编在之前更新的文章中有详细提到过小程序appid，如果大家关注了这方面的资料，那应该已经有了初步的了解，今天小编为大家讲一下怎么样搜索小程序的appid。

　　共有两个页面，一个是列表页，一个是详细页

　　通过这个示例，我们可以了解：

　　视图中如何获取数据

　　如何添加页面

　　页面间小程序导航栏跳转，如何参数传递

　　如何控制视图样式

　　主要步骤

　　1. 创建项目

　　小程序开发工具下载地址

　　打开后选择 “添加项目”

　　如果没有appid，就点击“无AppID”，功能会受限，主要是API调用方面的，视图层的开发没什么限制

　　2. 准备测试数据集合

　　如果想从自己的服务器获取数据，需要在公众平台的小程序配置中添加自己的域名才可以

　　我没法设置，所以只能使用假的测试数据，在项目的根目录下新建一个数据文件

　　data.js

　　内容形式为：

　　module.exports = [

　　{

　　image: '...',

　　title: '...',

　　content: '...'

　　},

　　...

　　]

　　是一个JSON数组，每条的结构是：新闻图片、标题、内容

　　在 app.js 中引入测试数据

　　// app.js

　　var newsdata = require('data.js');

　　App({

　　globalData:{

　　data:newsdata

　　}

　　})

　　3. 列表页的逻辑代码中获取数据，视图代码中循环展示

　　pages/index/index.js

　　// 取得 app 对象

　　var app = getApp()

　　Page({

　　data: {

　　// 获取全局数据，设置到本页的数据对象

　　news: app.globalData.data

　　}

　　})

　　pages/index/index.wxml

　　...

　　{{item.title}}

　　...

　　外层的

　　wx:for="{{news}}"

　　用来遍历 news，视图代码中可以直接调用 Page 对象的 data 中设置的数据

　　内层代码中使用

　　{{item.title}}

　　获取本条数据中的 title 值，'item' 是默认对象，用来代表循环中的单个条目

　　4. 新建详细页，添加到配置文件

　　在 pages 目录下新建目录 detail，在其中新建3个文件 detail.js、detail.wxml、detail.wxss

　　└── pages

　　├── detail

　　│ ├── detail.js (页面业务逻辑代码)

　　│ ├── detail.wxml (页面视图代码)

　　│ └── detail.wxss (样式代码)

　　页面以目录为单位，以后需要新建页面时，就在 pages 目录下新建子目录及相关文件

　　新建页面后，需要告诉app，修改 app.json，添加新建的 detail 页面

　　{

　　...

　　"pages":[

　　"pages/index/index",

　　"pages/detail/detail"

　　],

　　...

　　}

　　注意：不要写具体的文件后缀名

　　5. 点击列表中的标题跳转到详细页

　　页面的跳转通过 navigator 组件来实现

　　pages/index/index.wxml

　　...

　　{{item.title}}

　　...

　　就像html中的a链接一样，指向目标页面地址，'?' 后面跟着参数，{{index}}中的‘index’是 wx:for 循环中的默认参数，是当前循环索引值

　　6. 详细页获取目标新闻的ID，从数据集合中取得此新闻的详细信息，视图代码中展示出来

　　pages/detail/detail.js

　　var app = getApp() //取得 app 对象

　　Page({

　　onLoad: function (options){

　　// 获取传递过来的参数

　　var news_index = options.index;

　　// 根据 index 从数据集合中取得目标数据

　　// 设置到 Page 对象的 data 中，供视图代码中调用

　　this.setData({

　　news : app.globalData.data[news_index]

　　});

　　}

　　})

　　setData 方法非常重要，用来设置本页面中的 data 对象

　　视图中展示，pages/detail/detail.wxml

　　{{news.title}}

　　{{news.content}}

　　看完以上的步骤和相关小程序代码，现在你了解搜索小程序的appid要怎么做了吗?过程是不是很简单呢?赶紧试一试吧，更多相关资料请关注微信小程序素材网。

　　小程序appid是什么意思?小程序appid是唯一的吗?

　　小程序appid如何添加微信共分享功能?

　　怎么申请微信小程序的appid?申请微信小程序的appid的方法