Appcan Open Source case: Mobile e-commerce APP "overseas Purchase" ultra-detailed source

Developer: Girlfriend likes to use foreign skin care products, especially like Japanese and Korean beauty makeup, but suffer from no formal channels to buy. I heard that the domestic counters sold than the origin of imports of good, and now a variety of shopping pit, in a treasure is a lot of fake. What do you do? How many skin care products do you have to go abroad? This is one time the plane money can buy how much skincare! I am a big master also do not understand those, but look at girlfriend Zooey of Amoy is also quite tired, wish to help her to install a pair of eyes, so this inspired me to develop an overseas Amoy app, a cat global buy, Hold the spirit of good things everyone share, here to share the app source code. OK, no BB, get to the chase.

　　

Project implementation Features

User registration, login, product view and publish, add shopping cart, online payment, transaction confirmation, geo-location, product inquiry, comment and share, focus on merchants, etc.

Projects using plug-ins

The whole app frame, try to use 4 window, do not use a floating window, open the first page when the 4 window is opened, but when the window is opened window flags are 36=32+ 4, that is, the uex.cwindowflaghidden=32//tag is hidden by the open window. The hidden window does not appear on the screen and only exists in the background. Each time you click on the bottom bar to switch, just display the corresponding window.

Home

First sign in to the app or go to the live Details page to jump out of the cue layer:

On the homepage and click on the scene to enter the details page, Judge Opentimes to determine whether to jump out of the popup layer.

The main code is as follows:

var w=screen.availwidth;

$ ("#content"). CSS ("width", w+ "px");

Home:

　　

The head Carousel diagram effect is implemented using the Uexscrollpicture plug-in, and the Click event code for the Carousel diagram is as follows:

uexscrollpicture.onpicitemclick= function (data) {

var count=json.parse (data). Index;

Appcan.locStorage.setVal ("Linkurl", Urls[count]);

Appcan.window.open ("link", "link.html", 0);

}

This is achieved by clicking on different images to connect to different pages.

Carousel Chart below is the category and geographical classification column, all composed of Div, classification, Carousel map and product information display data are obtained from the background.

The bottom bar does not use the tab, the use of 4 div landscape, click on any of them, display the corresponding window, click on the three window to determine whether the user is logged in, not logged in to the login page, JS code as follows:

Appcan.button ("#search", "Btn-act", function () {

Uexwindow.open ("Search", "0", "search.html", "0", "0", "0", "0", "200");

})

Appcan.button ("#publish", "Btn-act", function () {

Uexwindow.open ("Publish", "0", "publish.html", "0", "0", "0", "0", "200");

} else{

Appcan.window.open ("Login", "login.html", 16);

}

})

Appcan.button ("#cart", "Btn-act", function () {

if (userid!=null) {

Uexwindow.open ("cart", "0", "cart.html", "0", "0", "0", "0", "200");

} else{

Appcan.window.open ("Login", "login.html", 16);

}

})

Appcan.button ("#my", "Btn-act", function () {

if (userid!=null) {

Uexwindow.open ("My", "0", "my.html", "0", "0", "0", "0", "200");

} else{

Appcan.window.open ("Login", "login.html", 16);

}

})

Query page

This page gets the category list content and all kinds of popular brands by invoking the backend interface, and the implementation code is not explained in the documentation provided. (For details, please see "Document Center-case Study-overseas purchase Case".) )

Publish Page

As an overseas Amoy + generation gap app, users in the release of goods, the project will be geographical location identification, location detection in foreign or Hong Kong and Macao regions, jump to the publishing page; If you are in the mainland, you can not release the product.

The code for taking pictures or selecting images from albums is posted here, using the Ueximage and Uexcamera:

function Choosepic () {

var data = {

Min:1,

Max:1,

quality:0.5,

Detailedinfo:false

}

var json = json.stringify (data);

Ueximage.openpicker (JSON);

Ueximage.onpickerclosed=function (info) {

Img_url = Json.parse (info). Data[0];

Uploadimg ();

}

}

function Takephoto () {

if (Uexwidgetone.platformname = = "ios" | | uexwidgetone.platformname = = "ios") {

Uexcamera.cbopen=function (OpCode, DataType, data) {

Img_url=data;

Uploadimg ();

}

Uexcamera.open (0,50);

}else{

Uexcamera.cbopeninternal=function (OpCode, DataType, data) {//Android only

Img_url=data;

Uploadimg ();

}

Uexcamera.openinternal (0,50);

}

}

Product Details

Product Details page, the buyer click on the consultation, will jump out of the input box, can be published consulting information; if it is a seller, do not display the bottom of the suspended window, you can click on the buyer to publish the consultation information, in the jump out of the input box to reply to the buyer. Here the head Carousel diagram also uses the Uexscrollpicture plug-in, call Ueximage.openbrowser to browse the larger map, the code is as follows:

uexscrollpicture.onpicitemclick= function (data) {

var count=json.parse (data). Index;

var len = bigimage.length;

var datas=[];

var url_imgb;

for (var i = 0; i < len; i++) {

URL_IMGB = Api+bigimage[i];

Datas[i] ={"src": url_imgb};

}

var params = {

"Displayactionbutton": false,

"Displaynavarrows": false,

"EnableGrid": false,

"Startongrid": false,

"StartIndex": Count,

Data:d Atas

};

var data = json.stringify (params);

Ueximage.openbrowser (data);

}

In addition, users can also share products, friends Circle, QQ friends, QQ Space and Sina Weibo, call the Uexweixin, UEXQQ, Uexsina plug-ins, these three belong to the third-party plug-ins, use before you need to apply for the relevant web site for developers, get to AppID.

Shopping Cart

Go to the Shopping cart page, if there are no items in the cart, as shown in the image on the right. After adding the item to the shopping cart, click Edit, the right side of the head text becomes complete, the bottom button becomes deleted, this part of the code is as follows:

function edit () {

var action = $ (' #changeEdit '). html ();

if (action = = ' edit ') {

$ (' #changeEdit '). html (' done ');

Uexwindow.evaluatepopoverscript ("cart", "content", "removeuhide ()");

} else if (action = = ' Done ') {

$ (' #changeEdit '). html (' edit ');

Uexwindow.evaluatepopoverscript ("cart", "content", "adduhide ()");

}

}

It's mine

This page buyers sellers orders to display the corresponding data according to the status, using Appcan.ajax (options) to initiate an AJAX request to obtain the appropriate content.

Appcan Open Source case: Mobile e-commerce APP "overseas Purchase" ultra-detailed source