原生小程序开发，你是怎么做到的？

1.app.js

:globalData :全局数据变量

onLaunch 初始化，只调用一次，，获取用户信息

2.app.json

:全部的页面地址，加状态栏标题栏等配置信息+sitemapLocation（允许小程序搜索）

3.project.config.json

:项目自动生成配置信息

4.每一个页面都含有

：xx.js ; xx.json, ;xx.wxss,; xx.wxml

5.每个页面的js内容（生命周期）

 

Page({

 

/**

* 页面的初始数据

*/

data: {

 

},

 

 

toLogin(e){//获取用户信息

console.log(e);

let userinfo = e.detail;

if (e.detail.errMsg != "getUserInfo:ok"){

wx.showModal({

title: '温馨提示',

content: '您还没有登录，请先登录',

showCancel:false

});

return;

}

 

// return;

 

wx.navigateTo({

url: '../login/login',

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

api.httpTest().then(res=>{

console.log('http',res);

}).catch(err=>{

console.log('http',err);

});

},

 

 

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

 

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

 

/**

 

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

 

})

 

6.定义常用变量的工具方法，函数

在util等文件中定义了基本数据，用module.export 暴漏，在其他文件中用require来引入；

7.公用的css样式的引入

对于公用的wxss在另一个页面的引入方式：@import '../../public/css/commen.wxss';

8.自定义组件

自定义的组件文件夹：a.component

在 a.component.js 中

Component({

/**

* 组件的属性列表

*/

properties: {

text: {

type: String,

value: '',

},

},

 

/**

 

* 组件的初始数据

*/

data: {

},

 

/**

* 组件的方法列表

*/

methods: {

}

})

在a.component.json中：

 

{

"component": true,//注册组件

"usingComponents": { }//

}

自定义组件的引入到另一个页面形式：

例如：引用到a.html .在a.json 中添加：

{

"usingComponents": {

"s-btn": "../../component/s-btn/s-btn",//组件的名字+组件所在路径

"s-input": "../../component/s-input/s-input",

"list": "../../component/list/list",

"options": "../../component/option/option"

}

}

在a,html中直接引用;

 

<view class="next">

<s-btn bindtap="nextStep" >下一步</s-btn>

</view>

在组件中的数据传递：

bindinput='onInput' 组件定义方法

在组件js 文件的methods中发送方法：

onConfirm(e) {

let val = e.detail.value || '';

this.triggerEvent('onConfirm', { val } )

},

父组件中：

 

子组件：

<s-input

placeholder='请输入姓名'

label="姓名"

border

defaultValue="{{applicant}}"

inputText="right"

bindonConfirm='getApplicant'

bindonBlur='getApplicant'

></s-input>

接受子组件的内容：

 

getApplicant(e){

this.setData({

applicant: e.detail.val

});

},

参看自定义组件文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

 

9.跳转页面

：wx.navigateTo({

url: '../profile/profile',

});

 

 

10.标签里面的自定义属性 data-*

再页面上写要传的数据

然后再点击事件中的 e.currentTarget.dataset 里面获取

例子：

<list label="电子邮箱" content="" placeholder="请输入电子邮箱" bindtap='modify' data-url="email"></list>

modify(e){//自定义方法

let page = e.currentTarget.dataset.url;

if(!page){return}

let url = `./${page}/${page}`;

wx.navigateTo({

url

});

},

 

11.关于数据绑定的问题：

所有的数据都是在。data:{},里面，获取用this.data.xxxx,更新用this.setDta({

xxxx:'123'})

数据从页面上获取，用的是e.detail,e.currttarget 从里面获取事件的数据

页面的尺寸单位都是rpx;

let tempList = [...this.data.selectedScopeList]; 遍历数组展开【'1','1'】

编译页面可以设置：工具--》编译配置--》指定某个页面

12.人员验证的需要自己写验证方法，

最后在保存时验证数据项。多个数据提交验证时，可以写一个变量flag,根据true/false来判断多个验证是否都验证完了

 

13.picker 组件

是从底部的下拉选择框，可以选地区，时间，日期，

14.用到了上传图片的api:wx.chooseImage

打开文件夹上传照片

15.对象的形式怎么重新改变值更新：

obj: {

a: 1,

b: 2

}

let obj = this.data.obj;//中间变量

obj.a = 2;

this.setData({

obj: obj

});

 

16.值的回显问题

<input

bindblur="getName"

bindconfirm="getName"

class='s-input f-input'

placeholder-class="c-l"

value='{{}}'

placeholder="请输入姓名" />

setData更新数据， 添加value 绑定，

17.新建一个页面文件

记得在app.json 上添加你的 页面

重新启动，添加编译编译配置--配置条件--添加你新添加的那个模块

18.小程序中的页面跳转

使用方法

1.wx.reLaunch 使用后会把所有的历史页面清除，当前页面为第一页，适合登陆页面

2.wx.navigateTo 跳转到其中的某个页面使用

3.wx.navigateBack(Object object)，返回上一页

公司申请的小程序，后台生成的id 

小程序的头像在设置里面设置的

19传参的形式

传参的形式：

 

一般参数跳转到下一页是例子：

wx.navigateTo({

url: '../operator/operator?hisid=' + me.data.hisid + '&entitytype=' + me.data.entitytype,

});

return (res = false); //return 的数据

cdata = this.data;//获取data的所有数据然后所有数据验证

接口数据，可以直接赋值成数组，对象

结语：

小女子才疏学浅，欢迎评论和点赞哦！