原生小程序
一般小程序是指微信小程序。
小程序平台：微信，支付宝，微博，百度，腾讯，抖音
微信小程序为例：原生开发(js) ——> mpvue——> uniapp
学习原生小程序开发（开发流程）逐渐过渡到uniapp开发流程。学习原生小程序
学习原生小程序
一、注册账号
1、进入微信公众平台
2、下拉找到小程序
3、点击详情注册开发小程序的账号
注意：
1、注册分为个人注册和企业注册
2、小程序上线都可以
3、个人小程序（不能获取用户手机号） 企业是可以的
4、支付不同 个人小程序无支付 企业可以认证支付
4、进入官方文档
二、登录小程序账号
注：appid是较为重要的，注意不要轻易泄漏给别人
三、下载开发者工具
1、打开微信开发者工具，第一次打开界面如图所示：
2、模板选择js模板
3、项目目录结构
（1）pages文件夹：主界面
index.js：业务逻辑
index.wxml：网页模板
index.wxss：css样式
（2）util文件夹：工具类
（3）app.js：全局主文件
（4）app.json：全局配置文件
（5）app.wxss：全局css
四、删除项目中无用的代码
原生js界面存在实例Page构造类，创建新项目删除即可
五、开始论坛项目的底部，在pages文件夹下创建msg和my文件夹
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
tabBar
如果小程序是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。
重要属性：
细节：tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
list栏位的属性：
注：icon限制大小40kb,建议尺寸81*81，不支持网络图片。position为top时不显示icon
在app.json文件中创建tabBar
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/tabbar/daxiao.png",
"selectedIconPath": "assets/tabbar/qushi.png"
},
{
"pagePath": "pages/msg/msg",
"text": "消息",
"iconPath": "assets/tabbar/fadai.png",
"selectedIconPath": "assets/tabbar/qinqin.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "assets/tabbar/liuhan.png",
"selectedIconPath": "assets/tabbar/kunao.png"
}
]
},
窗口表现
用于设置小程序的状态栏、导航条、标题、窗口背景色。
更改小程序默认启动页
原生小程序默认是以pages下的第一个界面作为启动页面的
六、原生小程序页面的制作
内置标签：
（1）view：视图容器，类似div，整体布局使用view搭建框架，原生小程序采用flex布局
（2）image：图片标签 类似img src路径，可以相对../ 直接绝对 /项目根开始
（3）text：文本标签 类似span 包裹文字
轮播图
<view class="swiper-list">
<swiper indicator-dots="true" indicator-color="rgb(255,255,255)" autoplay="true">
<!-- 循环 -->
<swiper-item wx:for="{{bannerList}}" wx:key="indexs" wx:for-item="items" wx:for-index="indexs">
<view class="banner-list">
<!-- 导航 -->
<navigator url="/pages/detail/detail?id={{items.id}}" open-type="navigate">
<image src="{{items.path}}"></image>
</navigator>
</view>
</swiper-item>
</swiper>
</view>
七、熟悉原生小程序开发中pages
***.js：是当前页面的业务文件，在改文件中写相对应的页面的业务操作
项目中的js文件：
app.js为全局项目入口文件。定义的操作为整个项目全局使用，存在App构造类 为全局的
utils.js：为公用业务逻辑封装
index.js：当前页面的业务文件
app.js文件中：
globaData：配置整个项目的全局变量
界面的js文件中获取整个全局变量
const app = getApp(); //获取整个应用的实例
八、app文件或者界面的js文件中存在大量的API
界面js文件中Page()注册一个小程序界面
注册小程序中的一个页面。接收一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
Page里面的周期
// index.js
// 获取应用实例
const app = getApp()
// 原生小程序
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
* options 接收加载界面传值的
*/
onLoad: async function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
* 首次加载
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
* 后台切到前台执行
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
page界面中的语法规则
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<!-- 循环渲染 -->
<swiper-item wx:for="{{bannerList}}" wx:key="index">
<view class="banner-list">
<!-- 导航 -->
<navigator url="/pages/detail/detail?id={{item.id}}" open-type="navigate">
<image src="{{item.path}}"></image>
</navigator>
</view>
</swiper-item>
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：
<swiper-item wx:for="{{bannerList}}" wx:key="indexs" wx:for-item="items" wx:for-index="indexs">
九、使用原生小程序内置api
原生小程序中发送请求需要使用：
注意：发起 HTTPS 网络请求。使用前请注意阅读相关说明。小程序打包上线 请求的协议必须是https 协议。
ajax请求写法
wx.request({
url: 'example.php', //示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}在page界面中写请求
/**
* 生命周期函数--监听页面加载
* options 接收加载界面传值的
*/
onLoad: function (options) {
//发送请求
wx.request({
url: '',
success(){
},
fail(){
},
complete(){
}
})
},缓存的api
封装的请求文件
//封装ajax 请求 封装为promise
let header = {};
//操作缓存
function getStorage(key) {
return wx.getStorageSync(key);
}
//封装ajax
function Request(url, method, data) {
//检测用户是否登录 存在token
let token = getStorage("_token");
if (token) {
header['token'] = token;
}
return new Promise((resolve, reject) => {
//创建request请求
wx.request({
url: url,
data: data,
method: method,
header: header,
success(res) {
//请求成功
resolve(res);
},
fail(error) {
reject(error);
}
})
});
}
//导出文件
module.exports = {
Request,
getStorage
}注意：在page页面中发送请求报错说请求域名没有配置不合法问题。
在Page周期中引入ajax发送请求获取数据设置到data数据源
data: {
//轮播图数据
bannerList: [{
id: 1,
path: "/assets/banner/1.jpg"
},
{
id: 2,
path: "/assets/banner/2.jpg"
},
{
id: 3,
path: "/assets/banner/3.jpg"
}
],
currentPage: 1, //当前页
lastPost:[],//最新动态
},
/**
* 生命周期函数--监听页面加载
* options 接收加载界面传值的
*/
onLoad: async function (options) {
//获取数据源
let { currentPage } = this.data;
//发送请求
let res=await findLastPost(currentPage);
this.setData({
lastPost:res.data.result.data
});
},完成效果如下图所示：
